Be the first to share your thoughts and start the conversation.
Not every animation needs to be dramatic or punchy.
Sometimes, you want transitions that feel gentle. You want things to move like they’re gliding across a smooth surface, effortless, calm, elegant.
That’s exactly what sine easing is for.
It is a subtle, wave-like easing group, perfect for small UI transitions that should feel smooth but not dramatic.
ease: "sine.in" // slow start, then speeds up (like a sine wave rising)
ease: "sine.out" // starts fast, then slows down softly
ease: "sine.inOut" // smooth ease in and out, very natural flowVisualize it yourself to see how each sine easing feels differently.
Does this make any sense? If not, you can actually see the effects of Sine Easing on an object.
Use sine easings when you want the animation to support the interface and not steal attention.
You can use it for modals, side panels or drawers, tabs, carousels, hover transitions, or any subtle looping effect.
Is sine easing the best choice here? Couldn’t we get the same effect with power easing? What’s the reason for using sine?
Excellent question. And yes, you’re right to pause here.
Both sine easing and power easing can be used in many of the same places, like modals, sliders, drawers, etc. But that doesn’t mean they would feel the same.
You could actually animate a modal or a box either with power2.out or sine.out. It might just work fine. But the difference lies in small details.
Box 1
Box 2
As you can see above, Sine is more gentle. It has no hard acceleration or deceleration. Whereas, Power gives you more control over “curve intensity” (with levels from 1 to 4), so you can dial in how aggressive or subtle you want things to be.
So, could you animate a modal with either one?
Absolutely.
It’s not about “right” or “wrong”.
It’s about what feels right for your product.
Taste lives in these small details.
You’ve seen this before multiple times. A “Scroll to Top” button that appears when a user scrolls down the page.
But instead of just popping in, your challenge is to make it gently float to show it’s interactive and non-disruptive.
So, create a scroll to top button that,
Bonus
Once you’ve built the idle animation, try adding:
Go give it a try
Didn’t get it perfectly? Totally okay.
This is one of those challenges where motion is felt more than debugged. The goal is to get comfortable with subtle, continuous animation, and you're already doing that just by experimenting.
Remember, you're not trying to build something perfect. You're training your sense of motion.
Watch it. Feel it. Adjust.
Next, we go the opposite direction and explore Back Easing for moments when you want your animation to have just a little extra personality.
00:00:29 And then we have to select the button from index.html.
00:00:33 So if you head over here and scroll down, you should be able to see that below all this content, there should be a little scroll-to-top button with a class
00:00:44 name that says scroll-to-top.
00:00:45 This is exactly what we need.
00:00:47 So, we have to select it.
00:00:50 Say const button is equal to document.querySelector and then you choose a selector, like a class in this case, by starting with a dot and then pasting
00:01:02 the full name.
00:01:02 In this case, I'll make this just a bit smaller so it fits into one line.
00:01:07 and we have to do this since we're working in vanilla JavaScript.
00:01:11 But if you were working with React or something else, you'll be able to use a ref or just attach a specific JavaScript function directly to that button
00:01:20 when it's clicked.
00:01:20 Still, the goal of this course is for it to be framework agnostic, so I think we'll be fine with just a bit of vanilla JavaScript.
00:01:28 Now, first things first, we want to attach an event listener to the window object.
00:01:33 by saying window.addEventListener of scroll.
00:01:38 and then a callback function that is executed once scroll happens.
00:01:43 Next, I want to check if window.ScrollY property is greater than 100 pixels.
00:01:52 And if it is, we want to apply a new class to the button by saying button.ClassList.Add a class of show.
00:02:01 So now if I save this and scroll down a bit, you can immediately start seeing this button.
00:02:07 This text is definitely longer than 100 pixels, so even doing something like 500 should do the trick.
00:02:13 Now, if we scroll down, it appears right here.
00:02:16 Now, what we want to do with GSAP is add a smooth floating animation.
00:02:21 So right here, I'll declare a new variable, let isFloating is equal to true initially.
00:02:28 And then within this if statement, I will check if the button is not currently floating.
00:02:35 In that case, well, let's make it float by using the gsap.to method where we want to target the button.
00:02:44 See, no longer we have to do something like .class to select it because we have already selected that element using the query selector.
00:02:53 So you can just target it like this.
00:02:55 And then, you know the drill, we provide a list of properties that we want to animate to.
00:03:01 In this case, I'll apply a nice little animation where the Y position of the button will change by minus 10 pixels throughout a duration of 1.5 seconds
00:03:16 with an infinite repeat.
00:03:18 So, repeat minus 1. a yoyo functionality of true, and finally, an easing of sine out.
00:03:28 I really like this one for this floating animation.
00:03:31 And here, we can set the isFloating variable to be set to true.
00:03:37 Now, finally, we don't want to always be showing this button after we reach 500, and then it's always there.
00:03:44 Rather, what we want to do is add an else statement to this if, not this one, but rather to the outside if, and say else.
00:03:54 If we're not past 500 pixels, we just want to remove a class name of show.
00:04:00 So run button.classList.remove show.
00:04:05 Perfect.
00:04:06 And now by default, let's set the isFloating to be set to false.
00:04:11 Great.
00:04:12 So now, let's go ahead and test it out.
00:04:14 If I reload and start scrolling down, you can see that at 500 pixels down, this button will actually appear, and it'll move a bit up and down like it's
00:04:25 inviting us to click.
00:04:26 It also has a yoyo, so it looks that it jumps up and down, and it repeats indefinitely because of the repeat minus one.
00:04:33 If we set the duration to something like 0.2 seconds, it's gonna jump in down much faster, really make it seem like a yo-yo,
00:04:42 but I think 1.5 or even maybe 2 seconds gives it that nice, flowy, floating vibe.
00:04:50 Of course, you can make it go much higher and much lower.
00:04:53 So now it's going to jump up and then fall down.
00:04:57 But in this case, I think what we initially had is pretty good.
00:05:01 And of course, you can test out different sign eases, like sign in in this case.
00:05:07 Although it's going to be very hard to notice the difference on such a small button, you can try all of them out.
00:05:13 Now let's try to play with this button a bit more and change the animation on hover enter and on hover exit.
00:05:19 So I'll head below this window add event listener and I'll target the button and add another listener to it.
00:05:28 Specifically, this will be a mouse enter event.
00:05:34 And if we enter with our mouse, we then wanna apply another gsab.to animation to the button where I will simply change its scale to 1.1 throughout a duration
00:05:48 of something like 0.2 seconds.
00:05:51 So now if I do that and if I come into it, you can see how it'll interact with our mouse click and it'll get larger.
00:05:59 But now once we exit, it doesn't actually get smaller.
00:06:03 So, to achieve that as well, we can duplicate this event listener, but I'll change it to MouseLeave.
00:06:12 And I will just bring it back to a scale of 1 throughout a duration of 0.2 seconds.
00:06:17 So now, as you enter and exit, see how it interacts with your click.
00:06:22 It's all about those micro-interactions that make the websites better, not the huge flashy ones.
00:06:29 Of course, both have their purpose.
00:06:31 And finally, let's make this button do what it's supposed to do, and that is to bring us to the top of this page.
00:06:37 We can do that with another event listener by saying button.addEventListener, click.
00:06:44 So once we click on the button, what will happen?
00:06:47 Well, here no GSP is required.
00:06:50 We're just going to use the window.scrollTo method to scroll it to zero zero, meaning the top of the page.
00:06:59 So now if I save it and click on it, see how we scroll back to the top and it disappears because we're no longer 500 pixels down.
00:07:08 So if I scroll.
00:07:09 We have the animations, and it brings me back.
00:07:13 Wonderful.
00:07:13 Of course, with these challenges, I didn't expect you to come up with the same exact solution.
00:07:19 As a matter of fact, adding these mouse enters and mouse leaves and scaling the button is just something I wanted to add to teach you that extra little
00:07:27 detail that makes the sites pop.
00:07:29 But the whole goal right here was to use this easing of sign out along with some other seemingly very simple properties to create this very seamless,
00:07:40 smooth animation.
00:07:42 Great work.