March 13th, 2024 Posted in Creativity, Web Design, Web Development

Greensock CSS/JS Animation library

I’m fairly late to the party with this one as I prefer designing low-motion websites and most of my clients don’t have budget for in depth website animations. Greensock is a free animation framework for managing CSS animations with Javascript and much more. Many award winning websites use Greensock to power their animations which can include parallax scrolling, locking panels in place, animating text in a letter or word at a time and some incredible 3D effects.

GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.

I’ve been using Animate On Scroll (AoS) to fade in panels when the page scrolls down, and a client asked me to add a graph to a page that animates in when appearing on screen. This led to D3.js for charting and then using Greensock (aka GSAP) to trigger the fade in as well as triggering the graph animation in D3.js.

We’d worked on a project where we tried to animate the hero area using CSS and it quickly got out of hand. We’ve also used Tumult Hype to create some nifty animations and that app has a nice timeline feature when building the animations to export. Hype struggles a bit with responsive embeds however and the official WordPress plugin has just been removed from wordpress.org for some reason.

It’s still early days with GSAP but it’s already replacing Animate On Scroll for us as well as offering lots more options for subtle animations. Amazingly it’s free for most use cases and developed by a small team who care about their product.