Skip to content

The Animated Web

  • Posts
  • Resources
  • Collections

GSAP

GSAP (Greensock Animation Platform) is a fast, reliable, and feature-rich javascript animation platform from Greensock. It's free to use on almost any project but check out their licensing for more information.

Quick Examples

Basic animation

javascript
gsap.to('.box', {x: 150, rotate: '45deg', duration: 1, ease: 'bounce'});

Timeline

javascript
let tl = gsap.timeline();
tl.to('.box-1', {x: 100, rotate: '45deg', duration: 0.5});
tl.to('.box-1', {y: 50, rotate: '90deg', duration: 0.5, ease: 'bounce'});
tl.to('.box-2', {x: 15, y:-11, scale: 1.5, duration: 1, ease: 'elastic'});

Community & Support

Greensock's forum is probably the quickest and best place to get answers, it's active and it's members have countless years experience with not only GSAP but in animation in general. The folks over in the Animation at Work Slack also have a dedicated GSAP channel and a friendly community ready to help. There is also the GSAP tag on Stack Overflow.

  • Website
  • Install
  • Getting Started
  • Common mistakes

People to follow

  • Greensock
  • Zach Saucier
  • Christina Gorton
  • Craig Roblewsky
  • Blake Bowen
  • Cassie Evans

Tutorials

  • Tips for Writing Animation Code Efficiently
    Tips for Writing Animation Code Efficiently
    Zach Saucier
    CSS Tricks
  • How to Animate on the Web With GreenSock
    How to Animate on the Web With GreenSock
    Sarah Drasner
    CSS Tricks
  • The New Features of GSAP 3
    The New Features of GSAP 3
    Christina Gorton
    Codrops
  • GreenSock Tutorials
    GreenSock Tutorials
    Craig Roblewsky
    MotionTricks

GSAP Inspiration

Gergely Gizella
Gergely Gizella
Gabriel Norman
Gabriel Norman
Selected Demos
Selected Demos
Delivering Happiness
Delivering Happiness
Aurélia Durand Portfolio
Aurélia Durand Portfolio
Goo Toggle
Goo Toggle
CHOCAPIC Nutri-Game
CHOCAPIC Nutri-Game
Kode Sports Club
Kode Sports Club
Medal of Honor: Above and Beyond
Medal of Honor: Above and Beyond
Chartogne-Taillet
Chartogne-Taillet
Sennep
Sennep
Minh Pham
Minh Pham
Glenn Catteeuw - Visual Designer
Glenn Catteeuw - Visual Designer
Goodboy Island
Goodboy Island
Squadeasy
Squadeasy
The Fabric of America
The Fabric of America
SVG
SVG
Rainbow Hypercube
Rainbow Hypercube
with Code
with Code
Simon Daufresne
Simon Daufresne
A Hoppy Ending
A Hoppy Ending
Big Sur Voice Memos
Big Sur Voice Memos
Orion's Galaxy
Orion's Galaxy
On / Off Switch
On / Off Switch
Sweet Punk
Sweet Punk
Diagonal Tumbnails Slideshow
Diagonal Tumbnails Slideshow
Mark Appleby - Creative Developer
Mark Appleby - Creative Developer
Making Maisel Marvelous
Making Maisel Marvelous
Impossible Checkbox v2
Impossible Checkbox v2
Circle of Lights
Circle of Lights
SVG Image Sequence Masks
SVG Image Sequence Masks
GOOD MOOD
GOOD MOOD
Million Devs
Million Devs
Chiara Luzzana – Sound Designer
Chiara Luzzana – Sound Designer
Dunderville
Dunderville
Cassie Evans's Blog
Cassie Evans's Blog
Superfluid
Superfluid
hamster-spin🐹
hamster-spin🐹
Autumn Leaves
Autumn Leaves
Airplanes
Airplanes
Pixelismo
Pixelismo
Little book of GSAP
Little book of GSAP
Animals sequence
Animals sequence
The Virtual Economy
The Virtual Economy
AR-Fake Sneakers
AR-Fake Sneakers
Smash that
Smash that "Like" button!
Lemonheads - Swissted
Lemonheads - Swissted
This is Spotify - Metallica Enter Sandman
This is Spotify - Metallica Enter Sandman
Star Wars The Rise of Skywalker
Star Wars The Rise of Skywalker
Zenly
Zenly
Vampire Bat
Vampire Bat
Night & Day
Night & Day
Monsieur Noss
Monsieur Noss
CineShader
CineShader
Airplane Mode Toggle Switch
Airplane Mode Toggle Switch
Peter Kuhn
Peter Kuhn
BB8 from Starwars
BB8 from Starwars
The Cool Club Deck
The Cool Club Deck
Interactive Hippo Button
Interactive Hippo Button
Squiggle text animation
Squiggle text animation
GSAP 3 Cube Walk
GSAP 3 Cube Walk
Entdecke die Würze Frankreichs
Entdecke die Würze Frankreichs
Leon Sans
Leon Sans
Animated Portrait
Animated Portrait
Aristide Benoist
Aristide Benoist
Fiery Hot Flames of Fiery Flaming Fire
Fiery Hot Flames of Fiery Flaming Fire
Unshift
Unshift
Prior Holdings - Experience
Prior Holdings - Experience
Particle UI
Particle UI
Hard Work
Hard Work
Hi Fly
Hi Fly
Rappi Pay
Rappi Pay
Procedural Low Poly Planet
Procedural Low Poly Planet
Save the Fiancé
Save the Fiancé
Colour Diver
Colour Diver
Lusion
Lusion
Low
Low
Heart is Home
Heart is Home
Finding ctrl: Visions for the future internet
Finding ctrl: Visions for the future internet
Planet Alert
Planet Alert
Mogney
Mogney
Kombu
Kombu
Flip Flap
Flip Flap
ultranoir
ultranoir
The Boat
The Boat
Sterling
Sterling
Jellyfish
Jellyfish
CurveBall
CurveBall
Garden Eight
Garden Eight
SUPERBIEN
SUPERBIEN
Love Box
Love Box
Nomadic Tribe
Nomadic Tribe
Liquified Image
Liquified Image
Coding is Fun!
Coding is Fun!
Bandito
Bandito
phantom.land
phantom.land
Plume and the forgotten letter
Plume and the forgotten letter
Ester Digital
Ester Digital
Big Lavender Game
Big Lavender Game
Innovation is Part of Our DNA
Innovation is Part of Our DNA
Panda
Panda
Les aventures potables d'une goutte d'eau
Les aventures potables d'une goutte d'eau
Google Cloud Infrastructure
Google Cloud Infrastructure
If This Then Domino's
If This Then Domino's
paradoxes-conseil.fr
paradoxes-conseil.fr
loveiko.com
loveiko.com
MOXY
MOXY
Yeti Hand Pagination
Yeti Hand Pagination
Robin Mastromarino
Robin Mastromarino
Mask Animation
Mask Animation

This site is created and maintained by Steve Gardner. It's built with Eleventy and hosted on Netlify

  • Posts
  • Resources
  • Collections
  • Inspiration
  • The Tiny Web Animation Newsletter
  • Get in touch