So what is a staggered stagger? Well its when you have 2 staggers on the same objects but offset in a way that allows them to work together. In this lesson our staggered staggers will control the entering and leaving of multiple elements.
This basic approach can yield much more visually intricate effects with just some minor adjustments as you’ll see at the end of the video.
Watch the video
The image below shows how the enter and leave animations are staggered. When one element is entering another is leaving.
Checkout the demo
Darin Senneff
I mentioned in the video intro that this effect was inspired by Darin Senneff. He has a knack for adding just the right amount of whimsy to things that are normally mundane (like login forms) and bringing them to a whole new level. Whether it’s a toggle switch, button, or complex character animation he always seems to nail the timing and easing making the animations a joy to watch. Do yourself a favor and check out his work.
His Yeti login in form was his first work that caught my attention.
The demo below is a great example of making a product rater fun and rewarding to use.
Check out more of Darin’s work
GSAP 3 Intro as seen on GreenSock.com
Continue Learning
This lesson is an excerpt from my premium course GSAP 3 Beyond the Basics. Join now and get the bonus lesson which shows you how to take this effect to the next level as a 3D Text Rotator.
GSAP3 Beyond the Basics is available to my Creative Coding Club members. My Creative Coding Club gives you access to the world’s largest collection of GSAP 3 training videos and demos at a super-low price.
Join me in my mission to provide high-quality and affordable animation training resources to all.