CA-Scroll Animation Demo

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.

Global Settings in Effect

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.

Fade In Top (Uses Global Offset)
Fade In Bottom (Uses Global Offset)

1. Basic CSSAnimation Effects

Elements using default cssanimation.min.css classes.

Fade In Top
Fade In Bottom

2. CSSAnimation with Element-Specific Offset

Elements animate when they are a certain offset from the bottom of the viewport, overriding the global setting.

Blur In (Offset 50px, overrides global)
Fly In Top (Offset 200px, overrides global)

3. Repeatable Animations

These elements will animate every time they enter the viewport. Scroll them out and back in!

Repeatable Move From Left
Repeatable Dance Top (with 1s Delay)

4. Delay and Duration (Element-Specific)

Custom animation delays and durations applied to CSSAnimation effects, overriding any global defaults.

Bobble with 1s Delay
Jello with 2s Duration
Wave Band with 0.5s Delay & 1.2s Duration

5. New Feature: Custom Animation Class

Using data-ca-animation-class to apply a custom defined @keyframes animation.

Custom BounceX (using data-ca-animation-class)

6. New Feature: Toggle Class

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).

Toggle Class Example (Starts Hidden, repeatable)

Here's an example using a CSSAnimation class as a toggle. Note that the animation will be paused initially.

Toggle Class Example (using ca__fx-moveFromLeft as toggle, repeatable)

End of Demo