Be the first to share your thoughts and start the conversation.
Most animations are content to arrive quietly.
But sometimes, your UI needs to make an entrance with a little flair, a little overshoot, a little “ta-da”.
That’s where back easing comes in.
Back easing adds a bit of rebound to the motion. It feels like the animated element overreaches its target, then gently corrects itself.
This means that instead of going from Point A to Point B in a straight line or simple curve, it goes a little too far (forward or backward) and then comes back and settles into place.
In GSAP, it comes in three variations:
ease:"back.in"// pulls backward first, then moves forward
ease:"back.out"// moves past the destination, then comes back
You can also customize how much it should overshoot,
ease:"back.out(2.5)"// higher number = more dramatic bounce
Don’t just read. Try it out to see how back easing works with different variations right here.
Back easing:
You can test these easings on a circle too. Feel free to play around these to understand how each variation works.
Back easing:
When to use?
You can use back easing when something is entering with flair (modals, cards, tooltips), snapping to position (like tabs or buttons reacting), or reacting to an interaction (press, hover, focus).
This easing is expressive. It’s great when you want your animation to feel alive, without going over the top like a bounce or elasticity.
Challenge
Your challenge is to build a tabbed Navigation system inspired by Apple Music or Notion. The system should have an “active tab” indicator below it that moves when a different tab is clicked.
Solution
00:00:00 Okay, let's go ahead and build this tabbed navigation system.
00:00:04 Right now, we have just a basic bar, and if you try to click some of these buttons, nothing works, Let alone animates.
00:00:11 So, lets do it together.
00:00:13 Open up the back-easing lesson, And let start implementing the solution.
00:00:18 First things first, We have to import GSAP from GSap.
And now we have to ask ourselves, how are we going to implement this animated underline indicator that smoothly moves to the selected tab when clicked?
I hope you got a real sense of what back easing brings to the table. It’s a different personality motion that makes things feel alive without feeling too much.
Up next, you’ll push motion further to make things land with more energy.
00:00:22
00:00:32 Well, first things first, in this case, we'll have select a couple of elements.
00:00:37 There is a tab, an indicator, and a Tab Row.
00:00:43 So since we're working with Plane.js, let's go ahead and grab all of these by saying const tabs is equal to document.querySelectorAll.
00:00:53 And then we can just target a dot tab right here.
00:00:57 We can duplicate this two more times.
00:01:00 For the second two, we can just use a regular query selector and we call it indicator and target the dot indicator class name.
00:01:10 And the last one will be a tab row where we query select a Tab dash row.
00:01:16 Perfect.
00:01:17 So now we grabbed all the tab buttons, the moving underline, and the container that holds all of the tabs.
00:01:24 Now, we have to create a function called UpdateIndicator.
00:01:28 So I'll say function Update Indicators.
00:01:32 That looks like this.
00:01:34 Of course, if you want to, you're totally free to use the ES6 version of this, which would look something like with an arrow function in mind.
00:01:42 Both of these versions work just fine.
00:01:45 Now, within this update indicator function, we first have to get access to the bounds of specific elements.
00:01:53 So for example, We can get to access the bound of the tab by saying tab bounds is equal to, and now what are we getting the bounce off?
00:02:03 Well, it's going to be the target element that we're going pass as the prop into the updateIndicator function.
00:02:09 So that's going to be target dot get bounding client rect, as in rectangle.
00:02:17 And we can do the same thing for the row bounds by saying const rowBounds, which is going be the tab row dot GetBoundingClientRect.
00:02:29 What this is doing is figuring out where the clicked tab is inside the row.
00:02:35 So let's get access to its width by saying tab bounds dot width.
00:02:41 And let us also get to access its offset by how much we want to move it, which is going to be equal to tab bounce dot left.
00:02:52 minus rowBounds.left.
00:02:55 And then GSAP will allow us to move the indicator to match the tab's position and width by using GSap.to method on the Indicator itself.
00:03:06 Then we can move to the X position by the offset that we have calculated right here.
00:03:13 we can set its width to be equal to the width that we have also calculated right here.
00:03:18 You can choose a duration of something like 0.4. And then finally, you can chose the ease which you want to apply.
00:03:25 In this case, we'll use the back.out 1.7 ease, which I found it works very well with the tab layout.
00:03:32 So once again, the X position will shift the indicator horizontally, Width will match the tab's size throughout a duration of 0.4 seconds with this back easing.
00:03:44 So now let's implement the actual tab bar logic.
00:03:48 We can do that below the indicator by saying tabs.forEachTab.
00:03:55 we can apply an event listener by seeing tab.addEventListener.
00:04:01 of click, and then we can define a callback function that gets executed on the click.
00:04:07 Once we click on each one of these indicators, we want to remove all other active classes from the other ones by saying tabs dot for each t just run the
00:04:23 t.ClassList.Remove and remove the active class from all of them because we want to only add it to the currently selected one.
00:04:29 So I'll say tab.classLists.Add and I will make it active.
00:04:35 Finally, we wanna call this UpdateIndicator function so that we can actually animate it.
00:04:39 I say Update Indicators and pass in the tab that you wanna add the indicator for.
00:04:45 And let's actually go ahead and call this update indicator once so it's already positioned on the pre-selected tab.
00:04:53 We can do that by saying updateIndicator, get the document.querySelector of the current active tab, like this.
00:05:03 So now if you save this and reload, you can see that it still remains on first selected tab And now, if you navigate over to features,
00:05:12 notice how the indicator moves from left to right or back.
00:05:17 It can even move all the way here to the end and notice how quickly it spins because the duration still takes 0.4 seconds no matter whether it moves from here-to-here,
00:05:29 like one spot, or it jumps over three of these additional tabs and goes to first one.
00:05:35 So why exactly did I choose the back out ease in this case?
00:05:40 Well, back out is an easing function that makes the animation go slightly past the target value and then come back, like a bounce or a recoil.
00:05:50 So if I click support, notice how it jumps out.
00:05:53 Same thing, take a look at the left corner, it jump out, so the back motion will actually overshoot the targets before settling,
00:06:02 The Out is the effect that happens at the end of the animation, which means that it starts fast and then ends with a bounce,
00:06:10 and 1.7 is an overshoot amount.
00:06:13 The higher it is, the more dramatic the bounce.
00:06:16 So if I set it to something like 10, just take a look at this.
00:06:20 It jumps out so much, it's pretty crazy.
00:06:25 So, we want to keep it something reasonable, like 1.7. So why is it useful for this specific case?
00:06:31 Well, because it makes it feel snappy and organic.
00:06:34 The overshoot makes the UI feel alive, and it avoids stiff and robotic motion.
00:06:39 Of course, you can switch it to my favorite, power1.inout, which will still be smooth, but it'll have no bounce, much less tactile.
00:06:50 Yeah, you can see the difference, right?
00:06:52 It kind of feels a bit slow and sluggish.
00:06:56 You could also try the bounce and take a look.
00:07:00 This one, yeah, it bounces, but it bounced in place and it looks a little bit unnatural.
00:07:07 So this back out is definitely the best easing function to implement for this indicator animation.
