For this purpose, you need to add an ID attribute to your target element, probably your <section>. Then, use that ID in value of
data-scrollto attribute of your button. For example, you have a demo section with following code:
<section class="section" id="section-demo"></section>
To scroll to the demo section, you need a button or any other element with
data-scrollto="section-about", so it can scroll to the target element upon click. A sample button is as follow:
<button class="btn btn-primary" data-scrollto="section-about">See demos</button>
AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down.
All you have to do is to add
data-aos attribute to html element, like so:
Also, you can set other options such as duration, delay and offset:
<div data-aos-duration="1300" data-aos-delay="500" data-aos-offset="200">
To see the list of available animations, visit the oficial documentation.
It's recommended to add class
.overflow-hidden to each section that contains animation, so you can be sure that your animated objects don't display outside of the section.
TheSaaS is based on Bootstrap 4. It means you can use any code from Bootstrap documentation to design your pages. We styled most of the components to look better in your pages.
Modals are one of the most required components by users. We provide an example here, but it's always a good practice to read the official Bootstrap documentation online. Press following button to see a sample modal.