Scrollspy

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.