---
title: 'Greensock CSS/JS Animation library'
url: 'https://www.nick-hayward.co.uk/greensock-css-js-animation-library'
markdown: 'https://www.nick-hayward.co.uk/greensock-css-js-animation-library.md'
date: '2024-03-13'
description: '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.'
taxonomy:
  category:
    - Creativity
    - 'Web Design'
    - 'Web Development'
---

[Home](https://www.nick-hayward.co.uk/) » Greensock CSS/JS Animation library

 ![gsap-css-animation-library.png](https://www.nick-hayward.co.uk/images/3/1/4/d/6/314d6f6013eda2339dad55fa1e44b14082a834e0-gsap-css-animation-library.png) 

 March 13th, 2024 Posted in [Creativity](https://www.nick-hayward.co.uk/taxonomy?name=category&value=Creativity), [Web Design](https://www.nick-hayward.co.uk/taxonomy?name=category&value=Web%20Design), [Web Development](https://www.nick-hayward.co.uk/taxonomy?name=category&value=Web%20Development)

# 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](https://gsap.com/) 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.](https://gsap.com/showcase/?page=1)

> 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](https://michalsnik.github.io/aos/) (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](https://d3js.org/) 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](https://tumult.com/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](https://wordpress.org/plugins/tumult-hype-animations/) 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.

---

## Navigation

- Parent: [Home](https://www.nick-hayward.co.uk/index.md)
- Previous: [Five of my essential WordPress plugins for 2024](https://www.nick-hayward.co.uk/five-essential-wordpress-plugins-for-2024.md)
- Next: [My iOS adblocking & privacy setup in 2024](https://www.nick-hayward.co.uk/ios-adblocking-privacy-setup-2024.md)

<!-- Added by Intention Header Footer Code plugin -->
<!-- Privacy-friendly analytics by Plausible -->
<script async src="https://plausible.io/js/pa-dVyPIkxnhGVxiRfGP1Cj2.js"></script>
<script>
  window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
  plausible.init()
</script>


<!-- Added by Intention Header Footer Code plugin -->
<style>
h1, h2,h3,h4 {
  text-wrap: pretty;
}
</style>