Trigger CSS Animations

Look, Ma! No animation framework needed!

Note this will not work for IE9, as it doesn't support CSS transitions.

1. The easiest way to animate using CSS is by defining a class that contains the changes and then appling the class to an element using class toggles.
2. The alternative is to change an object's inline style using ScrollMagic's scene events.

Sadly there is no timeline object for CSS animations, so they can only be triggered and not have their progress directly bound to scroll progress.

The duration can however be used to revert the animation to the previous state after a specific scroll distance. If classes are used for animating this happens automatically if the scene has a duration.

view source