Be the first to share your thoughts and start the conversation.
Sometimes, an animation needs more than just smooth movement or a playful bounce.
It needs to stretch, overshoot, and snap back dramatically like a rubber band.
Imagine pulling a slingshot. You stretch it… and then let go. It flies forward a bit too far, then bounces back and forth before it stops.
That’s the feeling elastic easing creates. It simulates the behavior of a spring or rubber band.
When something moves with elastic easing, it overshoots the target dramatically and then snaps back with diminishing oscillations before finally settling. This creates a feeling of tension and release.
Similar to other easing you’ve learned so far, Elastic Easing is also available in three variations:
ease: "elastic.in" // stretches in, like it’s charging up
ease: "elastic.out" // stretches past the target, then settles
ease: "elastic.inOut" // elastic on both ends
Elastic easing:
Graph animation may not be that clear, so go ahead and test elastic easings on a circle.
Elastic easing:
But it’s not just that. You can completely customize how dramatic it feels:
ease: "elastic.out(1, 0.3)"
As you can see, elastic accepts two arguments,
Amplitude (1)
It decides how far it stretches.
The higher the value, the bigger the wilder the overshoot.
Period (0.3)
It decides how fast it oscillates.
The smaller the value, the quicker the snapping.
You can always keep experimenting to find the right feel for your animation.
The most fun and useful one is elastic.out. You’ll probably use it the most in real-world UI.
When to use?
It’s great for onboarding animations, gamified elements, or any attention-grabbing actions. Anything literally that you want to behave like a spring.
Challenge
Let’s say you're working on a dashboard for a creative learning platform. Your team wants data visualizations to feel more playful and hand-crafted, not like typical sterile charts.
Your challenge is to build a bar chart that:
Feels like it was drawn in a notebook
Animates with elastic feedback when the data loads
Makes the data feel alive and delightful
Try to see how it feels or whether you think it’s even the best case to use elastic easing here. See yourself.
Solution
00:00:00 Here's the solution for the Elastic Easing Challenge.
00:00:05 As you already read about it, Elastic Easing creates that bouncy, spring-like motion that overshoots and oscillates before settling into place.
00:00:15 It mimics the effect of pulling and releasing a rubber band, making animations feel dynamic and playful.
00:00:23 There are different variants, like in, out, and in-out, which controls when that bounce occurs.
00:00:30 So here's a challenge.
You can use it where you want to impress. Or surprise. Or just to make someone smile :D
Onto the next one 🤘
00:00:31 In front of us, we have a chart of sorts.
00:00:33 So let's explore where is it coming from.
00:00:36 Right here within this index.html, you can see that the only thing we have is this repeat button, as well as a div with an ID of chart.
00:00:45 Then if you head over into style.css, you'll be able to see that this one has a few more styles than usual, because I needed them to create this nice looking
00:00:54 chart from scratch.
00:00:55 And then if you head over into the Script.js, you'll be able to see the starter code of this lesson.
00:01:00 All of the code right here has absolutely nothing to do with GSAP.
00:01:05 It is all about rendering and modifying the chart.
00:01:09 But right here is where the G-Sub animation will go.
00:01:12 So let's quickly go through it.
00:01:14 We're first selecting the repeat button so we can later on attach some functionality to it.
00:01:19 Then we have some sample data for each day of the week.
00:01:22 For example, 80, 60, 100, 70, and so on.
00:01:27 You can think of these as really any kind of data points that we can work with.
00:01:31 After that, we are getting the reference to the chart container, and then we're calculating the layouts by getting the current height.
00:01:39 We set the bar width and the spacing and the value of all of those points so we know what is the maximum value that exists.
00:01:46 And then we are ready to start rendering the chart by creating a new bar, giving it a specific number of pixels.
00:01:53 And then we start creating the bar for the values by first deciding its width.
00:01:58 And after the width, we need to define its height, which is the actual value that we want to display.
00:02:03 So we're doing that here.
00:02:05 And then finally, we attach a label to it and assemble those components by appending different children to them.
00:02:11 But now is the time that we actually animate it.
00:02:14 Here, we can first import gsap at the top, and then we can use our good old gsap.to, where we can target each individual bar,
00:02:27 and want to animate each one of those bars by giving it a scale y of 1. If you do that, immediately, you'll start seeing those different bars pop up on
00:02:39 the screen.
00:02:39 Let's increase the duration so they happen over a longer period of time, like 1 second, or maybe even 2. There we go, so now they're nicely filling in.
00:02:49 And finally, we're going to use the Elastic Easing by saying Ease, Elastic.out, and then you can even pass some additional numbers,
00:03:01 such as 1, which is the number of bounces, and then maybe we can do 1.25 for how far it overshoots, giving it a springy,
00:03:10 natural effect.
00:03:12 like a bar bouncing in place.
00:03:14 So if I save this, you can now see that it jumps up a bit and then comes down.
00:03:18 If I increase the number of bounces to something like 10, you can see that now it jumps out so much more.
00:03:24 And finally, we can play with a staggered delay right here.
00:03:28 Whenever you have an array of elements, well, that's a good place to introduce a stagger.
00:03:34 So I'll add a delay to each one of these elements of...
00:03:39 Well, you could just add like 0.1 second or you can increase it to maybe like 5 seconds and then all of them would start happening after 5 seconds because
00:03:52 they're all part of the same animation.
00:03:55 But...
00:03:56 If you take the index of the bar that we're currently trying to animate, because we are right here within a for each loop.
00:04:04 If you take that index and then multiply it by like 0.5 seconds for starters, you'll see that after each 0.5 seconds, a new bar will appear.
00:04:14 But you never want to be too aggressive with the animations, making them take too much time.
00:04:19 So we can just drop it down to like 0.1. So now they nicely appear one after another.
00:04:24 And I've also added the click event listener to the repeat function.
00:04:27 So it rerenders the chart.
00:04:29 So whenever you click it, you can see all of those bars just pop into place one more time.
00:04:35 with this elastic effect.
00:04:36 This seemingly very simple animation will make your static chart feel dynamic and interactive because each bar will grow elastically,
00:04:45 guiding the user's attention.
00:04:47 And you could try out some other easings.
00:04:49 For example, bounce.out instead of elastic.
00:04:54 You can see this one is much more exaggerated and might not feel good for a professional application, but if you want to go crazy with it,
00:05:02 well, be my guest.
00:05:03 You can also use something a bit more regular, like power2.out, for example.
00:05:09 And you can see that here it's just a bit more natural.
00:05:12 But I really like the elasticity for the charts.
00:05:15 And if you take a look at any kind of popular charts libraries, you'll notice that they use a very similar type of easing.
00:05:22 The more you understand the behind the scenes of these animations, the more you will start seeing them as you browse the web.
