Scroll down to see various elements animate into view. Observe the different effects, delays, durations, and repeatability. Open your browser's console to see debug logs.
Current global offset is set to 120px.
Elements in this section will trigger when they are 120px from the
bottom of the viewport
unless overridden by a ca-scroll-offset attribute.
Elements using default cssanimation.min.css
classes.
Elements animate when they are a certain offset from the bottom of the viewport, overriding the global setting.
These elements will animate every time they enter the viewport. Scroll them out and back in!
Custom animation delays and durations applied to CSSAnimation effects, overriding any global defaults.
Using data-ca-animation-class to
apply a custom defined @keyframes animation.
This element starts with my-initial-hidden (making it
hidden and shifted left) and this class is removed when in view. It
reapplies when scrolled out (because it's repeatable).
Here's an example using a CSSAnimation class as a toggle. Note that the animation will be paused initially.
End of Demo