Learning GSAP Step by Step: .from() vs .to()

I’m just starting to learn GSAP deeply, and I realized something important: instead of learning silently, why not share everything step by step?

I haven’t completed it yet… I’m still at the beginning. But I believe sharing from the start can help others who are also new and feeling confused.

So today, I’m sharing one of the most basic but powerful concepts in GSAP:

**.from() and .to()**

.from()

Use .from() when we want an element to come from somewhere and settle in its normal position.

In simpler words, you define the starting point of the animation, and GSAP animates the element from that point to its default position.

Here is the graph image to better understand:

Example:

gsap.from(".box", { x: -200, opacity: 0, duration: 1 });

.to()

Use .to() when we want an element to start at its normal position and animate to the position we want it to end.

Here is the graph image to better understand

Example:

gsap.to(".box", { x: 200, opacity: 1, duration: 1 });

I’m still learning, but sharing this journey! Follow along for more GSAP tips and animations

Author : Oishe Khan passionate FullStack Dev, Deep Learning Engineer from Bangladesh

Follow me on,

• *Github to see up work update.*
• Linkdin to see my overall progression.