No Comments Yet
Be the first to share your thoughts and start the conversation.
Learn Set
Loading...
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we explore the .set method of GSAP, which allows you to prepare elements for animation by applying styles instantly without any transition. The speaker demonstrates how to move an element off-screen before it comes into view during an animation sequence.
Key Takeaways:
.set method is used to define the initial state of an element for animations.gsap.set to position elements off-screen, preparing them for their animated entrance..set is akin to placing an object on a stage, making it invisible to the audience until the animation occurs.00:00:00 And finally, there's the .set method.
00:00:03 So if we head over to our example where it says learn set, you'll notice that right here we have just one simple GSAP box.
00:00:12 And within the styles, you'll notice that it's nothing more than a simple box that is initially visible.
00:00:18 But now, what if you initially want to have that box off screen, and then you want to animate it from somewhere?
00:00:25 Like, let's say that your styles put it here initially, but you want it to start from the right side, or from the top, or from the bottom.
00:00:34 You have to somehow prepare it for the animation that's about to happen.
00:00:38 And for that, we use the .set method.
00:00:41 So first, import gsap from gsap.
00:00:46 And then, let's immediately set the box to an off-screen state without the animation by saying gsap.set.
00:00:54 Target the .gsap box.
00:00:57 and then give it the opacity of 0, a scale of 1.5, and maybe a position Y of 100 to get it off the screen.
00:01:07 So this allowed us to both keep the original styles of the box and then also prepare it for the animation that's about to happen.
00:01:16 So now, if you want to animate it into view after a short delay, we can use our get all gsap.to by targeting the gsap box,
00:01:26 giving it a delay of about 0.5 seconds, and then bring it back to visibility with opacity one, scale one, y position of zero,
00:01:37 so it's in the middle, duration of about 0.6 seconds, and an ease of expo.out.
00:01:45 So now if you save it, you'll see that it'll actually pop up from the bottom.
00:01:50 But using set, if you want to actually initially set it to come from the top, you can set the Y position to minus 100. And now notice how it comes from
00:02:00 the top.
00:02:01 Or maybe you want to make it come from the top right.
00:02:06 In that case, you could set the X position also right here, and then it'll be moved into the X position.
00:02:12 But here you can bring back the X to zero.
00:02:15 So it still comes back in the center, but where it's coming from.
00:02:19 So the initial position is going to be from the right.
00:02:22 Of course, if we slow it down a bit, you'll better see what is happening.
00:02:26 And I'll even make the effect a bit more exaggerated by bringing these to 500 and 500 here as well.
00:02:34 So now notice how it's flying in from the top right.
00:02:37 Or maybe it's flying in from the bottom left.
00:02:41 you control where the animation starts from.
00:02:45 In simple words, the .set method is a non-animated version of the .to method.
00:02:51 It instantly applies values to elements, and it is often used to prepare or reset state before running animations.
00:03:01 Think of the dot set method like placing an object on stage before pulling the curtain.
00:03:07 The audience never sees the placement step, only what comes after.
00:03:12 Cool.
00:03:13 So now you know how to prep for your animations as well.
00:03:16 Great work.