Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Learn from
Loading...
Loading...
In the last lesson, we explored how .to() animations work - they take the current values of an element and smoothly animate them to a new state. But what if you want the opposite ? What if you want your element to start from a different position and animate into its natural place? That’s exactly what .from() is for. Think of it like this: instead of moving to a destination, .from() lets you animate from a starting point back to where the element already is in the DOM. It’s like playing a story in reverse, making elements appear as if they fly in, fade in, or pop into place.
In GSAP, .from() , and then goes back to whatever the element's original values are.
Start from these values, then animate to what it should naturally be.
It’s perfect for creating those magical entrance animations where things seem to fly or fade into place. Official Documentation
Let’s say you want an element to fade in while sliding up.
gsap.from(".box", {
opacity: 0, // Start invisible
y: 100, // Start 100px lower (like translateY(100px))
duration: 1, // Animate over 1 second
});✨ Smooth and clean!
You can animate any properties:
gsap.from(".selector", {
x: 100,
opacity: 0,
scale: 0.5,
rotation: 45,
duration: 1,
delay: 0.3,
ease: "back.out(1.7)",
stagger: 0.2,
repeat: 1,
yoyo: true,
onComplete: () => console.log("Animation finished!"),
});And remember: GSAP can animate - not just CSS. You can animate objects too! (We’ll play with that later.)
👉 Try creating a "pop-in" effect:
gsap.from(".box", {
opacity: 0,
scale: 0,
duration: 1
});Let’s do another example:
gsap.to(".box", {
y: 100,
delay: 2,
});
gsap.from(".box", {
delay: 3,
y: 100,
scale: 0,
duration: 1,
});What happens here ?
Because .from() by default the starting values as soon as the tween is created.
This is due to immediateRender: true being the default for .from().
immediateRender: falseYou can fix it by telling GSAP to wait until the animation starts:
gsap.to(".box", {
y: 100,
delay: 2,
});
gsap.from(".box", {
delay: 3,
y: 100,
scale: 0,
duration: 1,
immediateRender: false,
});Today, you didn’t just learn a new GSAP method.
You unlocked an essential animation technique: entrance animations. ✨
.from() works like a .immediateRender: false.👏 You've officially leveled up your animation toolbox!
Now that you know how to animate from a starting state, and to a new state...
But what if you want full control - defining both the start and end yourself?In the next lesson, you’ll meet your new best friend: , the ultimate combo move!
Get ready to animate like a true master. 🧙♂️✨
See you there!
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
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 In this lesson, let's talk about GSAP's .to Twin method, the .from.
00:00:07 It's used to animate elements from a new state to their current state.
00:00:13 It's similar to GSAP to, but the difference is that the from animates from a new to a current, while to animates from their current to a new state.
00:00:24 For example, let's say that we have these cards right here.
00:00:28 And they currently have a specific state, but then when you trigger the animation, you want to load them.
00:00:34 Essentially, we want to animate the entrances of these three cards on the screen.
00:00:39 So they enter and then they stay in their final state.
00:00:42 To achieve that, let's head over into the learn from script and let's import GSAP from GSAP.
00:00:50 And let's start by animating the first card by saying GSAP.from card-1.
00:00:57 which we can target by the class name.
00:01:00 And we can change the Y position to something like 60. This means that it'll start 60 pixels lower than where it currently is.
00:01:10 We also want to start it from the opacity of 0. So this is the other way around.
00:01:15 Typically before we had to give it 0 and then animate it to 1, but here we're starting from the opacity of 0 and then animating to 1. And you can see how
00:01:26 now it nicely shows up at the top.
00:01:28 We can also modify the scale to 0.95 for example.
00:01:33 as well as a duration 0.6 seconds and a delay of about 0.2 seconds.
00:01:41 So now it'll wait a bit and then it'll pop up.
00:01:43 And we can do it with an ease of Power4.out.
00:01:49 There we go.
00:01:49 So now it starts slowly and then pops up.
00:01:52 The final styles are going to be contained within the styles.css where each one of these cards has a width, height, specific color,
00:02:00 and a scale.
00:02:01 So here, you want to make sure that you have the final look of your card and then the from method animated from a previous state.
00:02:09 And if you think about it, this actually makes more sense than initially setting the opacity to zero to this card, which doesn't make sense.
00:02:17 Like, why would you style this card to have an opacity of zero?
00:02:21 No, you want to be able to see it initially, but then in case you want to animate it from something, you can modify directly here.
00:02:28 So now, let's duplicate this down two more times.
00:02:33 Once for the second card, and once for the third card.
00:02:38 And we can also change the delay to 0.5 and something like 0.8 for these cards.
00:02:47 Now, if you save it, you'll notice that these cards will have something known as a sequential reveal, which means that card 1 will appear first,
00:02:55 then card 2, and then card 3, creating this pleasing visual rhythm.
00:03:01 And although this looks and works fine, it's not the most efficient way to animate cards.
00:03:06 Rather than repeating the same lines of code, you can achieve the same effect with a single GSAP property.
00:03:13 Notice how in our index.html, when we were styling these cards, all three of them have a similar base card style, which has all of the shared styles of
00:03:24 all of these three cards.
00:03:25 and then the only thing that the second class name changes is the background color.
00:03:30 So if you want to target multiple elements at the same time, you can just target that class which more elements are a part of.
00:03:38 So if you save it, now notice how all three of them appear at the same time.
00:03:43 It's pretty cool, but how can we have that staggered effect?
00:03:47 Well, let's use a Stagger property of about 0.2 seconds.
00:03:51 The Stagger will add a delay between the start of times of animations for multiple elements creating that cascading or wave-like effect.
00:04:01 Perfect for animating lists, grids, or repeated elements smoothly and efficiently.
00:04:06 We'll definitely talk much more about Stagger in the upcoming modules, as it's one of very powerful G-Sub features.
00:04:13 But what if you want to rerun this application without reloading the screen?
00:04:18 Well, for that, we can use one of the G-Sub tween methods, the one you learned about before.
00:04:23 It's just one simple function call.
00:04:26 So let's first target the repeat button by saying const repeat is equal to document dot query selector.
00:04:36 And we can target the dot repeat button.
00:04:40 And then at the bottom, we can say repeat dot add event listener of dot click.
00:04:48 Where on the callback call, we'll simply call the animation dot restart.
00:04:54 But which animation are we talking about?
00:04:57 Well, as you've learned, you can attach a specific animation to a variable.
00:05:02 So we can say const animation is equal to, and then we define this from method.
00:05:09 And then this is of course referring to this animation.
00:05:11 So now if you remove this dot, because this is not a class name, it is type of an event.
00:05:16 And if you try pressing the reload, you'll be able to see this animation multiple times.
00:05:20 Pretty cool, right?
00:05:22 Now you know not only how gsub.to works, but also the gsub.from.
00:05:27 Great work.