Web Animation Research
Some web animation research I performed pointed towards two incredibly useful frameworks, which I will definitely consider using in future. The project that sparked the research no longer requires web animation, but I intend to apply these frameworks to future works.
With that in mind, I intend to use AOS for websites that require simple animation, while ScrollMagic will be reserved for more in-depth animations and scenes.
It allows the full control of a user’s scrolling experience. The examples set out on the ScrollMagic website are testament to its capabilities.
- animate based on scroll position – either trigger an animation or synchronise it to the scrollbar movement.
- pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).
- toggle CSS classes of elements on and off based on scroll position.
- effortlessly add parallax effects to your website.
- create an infinitely scrolling page (ajax load of additional content).
- add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.
AOS (Animate on Scroll)
This is a very different framework to ScrollMagic, and may only be able to be used for animating elements on a page. There may or may not be functionality for triggers.