Chapter 14: gsap.from()

Core Idea

gsap.from() is a "backwards" tween: you define the starting values, and it animates to the element's current state — ideal for animating things into view.

Key Concepts

• Returns: a Tween, same as gsap.to().
• Starting-values-only: you specify where the animation begins; the end state is whatever the element's current value already is.

Code Examples

// animate from opacity 0 / y:100 to the current values (opacity 1, y:0)
gsap.from(".class", { opacity: 0, y: 100, duration: 1 });

• What it demonstrates: setting an element up visually at its final position/style in markup or CSS, then animating it in from an offset state without hardcoding the destination values.

Key Takeaways

1. Use from() when the end state is already correct in your markup/CSS and you just want to animate the entrance.
2. If you need explicit control over both start and end, use fromTo() instead.

Connects To

• gsap.fromTo(): explicit start and end control instead of inferring the end from current state.
• gsap.to(): the mirror-image tween, using current state as the start.