RxDesign

A portfolio website, by Rick Bairstow. Showcasing projects, work, photography, and art.

Web Animation

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.

ScrollMagic and AOS were the two prominent frameworks identified. AOS is a lightweight CSS3 animation framework, it uses simple data tags to add animations to elements; this is an easy-to-use method allowing quick addition of CSS animations. ScrollMagic is a JavaScript framework, based on the GSAP framework. It can create in-depth animations using text, images, SVG, etc, all grouped within scenes (similar to Adobe Animate). As ScrollMagic doesn’t use CSS animation, the learning difficulty is increased when compared to AOS.

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.

ScrollMagic Info

ScrollMagic Demo

ScrollMagic is specifically designed to react to user scrolling. It is a lightweight (6kb size) JavaScript framework, that is both flexible and mobile compatible. It allows content to be animated or displayed based on scroll position, or scrollbar movement.

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.

 

ScrollMagic Website (ScrollMagic Examples linked on this page)
ScrollMagic Documentation
ScrollMagic Wiki Page
Uses GSAP framework for functionality (GSAP Example)

 

AOS (Animate on Scroll)

AOS is a lighter framework, which uses only CSS animations, there is no JavaScript involved. It allows you to animate elements as you scroll up and down a page. Elements will animate to previous states, and are always ready to reanimate, depending on the users scrolling.

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.

Examples and Framework Link
AOS on CSS Tricks
AOS GitHub

Next Post

Previous Post

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2020 Rick Bairstow

Privacy Policy | Back to top