00:00:00 Let's dive right into the Expo Easing, which creates dramatic animations that start or end extremely fast or slow, mimicking exponential acceleration or deceleration.

00:00:13 It's perfect for those effects that need a powerful burst or a sharp, smooth finish.

00:00:19 Expo In begins slowly and speeds up rapidly, ideal for building tension, while the Expo Out starts with a burst of speed and then slows dramatically.

00:00:30 Perfect for those clean techie finishes.

00:00:33 But if you want to combine both, well, you will have an intense cinematic feel.

00:00:38 For this challenge, the goal was to create a little pop-up animation that shows you different tools that you can use from this single floating button.

00:00:48 That button is contained right here within the index HTML.

00:00:51 You can see it right here as a plus.

00:00:54 But then if you want to choose your topping on the pizza, well, donuts might not be the best topping to choose, but hey,

00:00:59 here you go.

00:01:00 Well, then it needs to show up right here above the button and allow your user to choose it.

00:01:05 We have some styles right here and different colors for all of these buttons.

00:01:09 And then within the script, we have a simple starter.

00:01:13 As usual, no gsap logic here so far.

00:01:16 We're mainly just setting up our workspace.

00:01:18 So we're selecting the buttons and the children.

00:01:21 We're setting the radius of how far children we want spread out from the center.

00:01:25 And we have a variable to track whether the menu is expanded or collapsed.

00:01:30 Then we have an event listener that happens on click of the button, which changes the button from a plus to an X.

00:01:39 You can see that's working already.

00:01:40 But then, if it's expanded, we want to define how or where those additional buttons will pop up.

00:01:47 So here, I asked ChatGPT to do a bit of math for me.

00:01:50 Since we're working in a circular shape, they're going to appear here, here, and here around this button.

00:01:57 We are using a bit of radians or pi formations, but that's not something we have to worry about here.

00:02:04 We have to worry about actually animating those buttons to pop up.

00:02:08 So once we actually calculate the angle of where we want to make them show up, we have to animate them to pop up and then animate them to go down.

00:02:17 So let's focus on that right away.

00:02:19 Okay.

00:02:19 To animate it, we first have to import gsap from gsap.

00:02:24 And then we can start using it right here by saying gsap.to.

00:02:30 We're going to target a child element.

00:02:33 And we want to start animating its X and Y positions.

00:02:38 So simply set X to X, because we have already calculated it, and Y to Y.

00:02:43 You can see, we have those values right here.

00:02:46 Then we also want to modify its opacity to 1. So it goes from invisible to visible.

00:02:53 And already, this is looking kind of okay.

00:02:55 You can see they slowly start appearing there, and then they stay there until we reload.

00:03:00 For now, when we try to collapse it, maybe we can just run gsap.to.

00:03:06 We're going to collapse a child with a property of X0, Y0 to bring it back, and then an opacity of 0 as well.

00:03:18 For now, this should be good enough to just hide it.

00:03:21 Perfect.

00:03:22 But this is not looking snappy.

00:03:25 It's not looking like it jumps out and gives you options to choose from.

00:03:28 One step closer to achieving that is maybe by rotating those circles.

00:03:34 So we can rotate them by 360 throughout a duration of 0.5 seconds.

00:03:40 So now if I click, you'll see they rotate, but you can barely see it.

00:03:46 You have to reload and then, yeah, here it is.

00:03:49 But it still feels slow.

00:03:52 Even if you decrease the duration, it doesn't feel all right because the easing is just not good.

00:03:59 So in this case, the easing that makes a lot of sense is, and in this case, I'll use expo.out.

00:04:07 It's a very powerful easing curve, which starts very fast and ends very slow.

00:04:12 So check this out.

00:04:14 It feels like a spring that you pull back and then release, and it suddenly jumps out.

00:04:20 The out means that it will start slow and then start fast.

00:04:25 But if you did it the other way around, if you set in, then Take a look, it started very slow so that it felt like nothing was actually moving and then

00:04:34 it ended very fast.

00:04:35 This is not what we want.

00:04:37 In this case, you can also just say export and not pass any parameters or parentheses.

00:04:42 It's good like this too.

00:04:43 And now we have to do the opposite for when we want to collapse them.

00:04:47 So I'll bring the scale to a bit of a lower value, like 0.8. I will rotate them back to zero throughout iteration of like 0.3 seconds with an ease of power1.in

00:05:04 and I'll set the pointer events to none because these buttons will no longer be clickable as they'll be inside of this plus button.

00:05:13 So if I save it, It expands nicely, jumps out, and then, well, nothing happens.

00:05:19 That's because this none right here should be within a string.

00:05:23 So now you can see that it jumps out, and then it comes back in.

00:05:26 In this case, I used Power1.in to show a simpler, but faster, more mechanical animation.

00:05:34 But in this case, what you can also try is using expo.in instead of expo.out.

00:05:41 So it'll reverse the previous animation and it'll feel like it's sliding back into its place.

00:05:47 Pretty cool, right?

00:05:50 This just feels right.

00:05:52 And there aren't too many places where Expo Out or Expo In are the perfect animation to choose, but whenever you need something slow and then fast,

00:06:00 or fast and then slow, or both, well, Expo is the perfect choice.

00:06:05 And you can notice how easing didn't change the position of these elements.

00:06:10 They were still where they're supposed to be, but it changed the feel of how it's expanding.

00:06:14 So I invite you to try to mess with it a bit.

00:06:17 change the scale, see how that works, or maybe decrease it even more so that it feels like the elements are disappearing into this button.

00:06:26 That's a cool one.

00:06:27 Try changing the rotation, maybe the background color, or as an additional challenge, try adding staggered delays using the delay functionality with this index.

00:06:39 We learned that in one of the previous lessons.

00:06:42 So if you make the animation super fast, but staggered, it might feel like one, two, three are all collapsing one after another in this circle.

00:06:51 So great work.

00:06:53 Now you know how to use the expo easing.