Uploaded December 2024 | Updated September 2026, 2 weeks ago
Here is the GSAP homepage animation at normal and super slow speed. Although none of the individual animations are anything difficult it's the precise choreography and creative approach that makes this spectacular.
Watch a few times in slow motion and see how
- certain characters slide in from different directions
- icons get revealed in numerous ways
- everything is timed perfectly
- some characters rotate in 3D
- other characters rotate around unique transformOrigins
View the original animation at gsap.com
I would say that 75% of the work for a project is in how the HTML and CSS is set up. You need to plan where each character comes from and moves to! You also have to figure a way to mix in all those playful icons.
The demo below shows JUST THE HTML for the word "Animate" from the gsap site. NO css or javascript
codepen.io/snorkltv/pen/emOGBVq?editors=1000
So just setting that up could be quite overwhelming.
My advice is to start small and just try to build two or 3 of these effects.
For instance if you want some characters to drop into place this demo could be helpful
codepen.io/snorkltv/pen/bGQKVQo??editors=0010
Learn GSAP for Free
creativecodingclub.com/courses/FreeGSAP3Express
Here is the GSAP homepage animation at normal and super slow speed. Although none of the individual animations are anything difficult it's the precise choreography and creative approach that makes this spectacular.
Watch a few times in slow motion and see how
- certain characters slide in from different directions
- icons get revealed in numerous ways
- everything is timed perfectly
- some characters rotate in 3D
- other characters rotate around unique transformOrigins
View the original animation at gsap.com
I would say that 75% of the work for a project is in how the HTML and CSS is set up. You need to plan where each character comes from and moves to! You also have to figure a way to mix in all those playful icons.
The demo below shows JUST THE HTML for the word "Animate" from the gsap site. NO css or javascript
codepen.io/snorkltv/pen/emOGBVq?editors=1000
So just setting that up could be quite overwhelming.
My advice is to start small and just try to build two or 3 of these effects.
For instance if you want some characters to drop into place this demo could be helpful
codepen.io/snorkltv/pen/bGQKVQo??editors=0010
Learn GSAP for Free
creativecodingclub.com/courses/FreeGSAP3Express
