AnimateOnScroll

AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.

Animation classes are defined with the enterClass and leaveClass properties. This example utilizes tailwindcss-primeui plugin animations however any valid CSS animation is supported.

Scroll Down
IndividualLorem ipsum dolor sit amet consectetur adipisicing elit.
TeamLorem ipsum dolor sit amet consectetur adipisicing elit.
EnterpriseLorem ipsum dolor sit amet consectetur adipisicing elit.
Jenna ThompsonLorem ipsum dolor sit amet consectetur adipisicing elit.
Isabel GarciaLorem ipsum dolor sit amet consectetur adipisicing elit.
Xavier MasonLorem ipsum dolor sit amet consectetur adipisicing elit.
850KCustomersLorem ipsum dolor sit amet consectetur adipisicing elit.
$1.5MRevenueLorem ipsum dolor sit amet consectetur adipisicing elit.
140KSalesLorem ipsum dolor sit amet consectetur adipisicing elit.
BandwidthLorem ipsum dolor sit amet consectetur adipisicing elit.
StorageLorem ipsum dolor sit amet consectetur adipisicing elit.
RequestsLorem ipsum dolor sit amet consectetur adipisicing elit.

Animation classes are defined with the enterClass and leaveClass properties. This example utilizes tailwindcss-primeui plugin animations however any valid CSS animation is supported.

Scroll Down
IndividualLorem ipsum dolor sit amet consectetur adipisicing elit.
TeamLorem ipsum dolor sit amet consectetur adipisicing elit.
EnterpriseLorem ipsum dolor sit amet consectetur adipisicing elit.
Jenna ThompsonLorem ipsum dolor sit amet consectetur adipisicing elit.
Isabel GarciaLorem ipsum dolor sit amet consectetur adipisicing elit.
Xavier MasonLorem ipsum dolor sit amet consectetur adipisicing elit.
850KCustomersLorem ipsum dolor sit amet consectetur adipisicing elit.
$1.5MRevenueLorem ipsum dolor sit amet consectetur adipisicing elit.
140KSalesLorem ipsum dolor sit amet consectetur adipisicing elit.
BandwidthLorem ipsum dolor sit amet consectetur adipisicing elit.
StorageLorem ipsum dolor sit amet consectetur adipisicing elit.
RequestsLorem ipsum dolor sit amet consectetur adipisicing elit.
basic-demo

Screen Reader

AnimateOnScroll does not require any roles and attributes.

Keyboard Support

Component does not include any interactive elements.

ON THIS PAGE
Theme Designer
Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, Figma to theme code, cloud storage, and migration assistant.
Learn More