Trigger events and animations while scrolling your page.
The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element.
Fade
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Scale up
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Scale down
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Slide top
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Slide bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Slide right
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Slide left
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Groups
You can also group scrollspy elements, so you won’t have to apply the data attribute to each of them. When using a delay it will be applied cumulatively to the items within the row that scrolls into view. The delay will be resetted for the next row within the group when it scrolls into view.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit.