Chapter 240: Flip.from()

Core Idea

Instantly snaps targets to match a previously captured state, then animates backward to their current (new) state — the core method of the FLIP pattern.

Reference Tables

Parameter	Type	Description
state	FlipState	from Flip.getState()
vars	Object	standard tween vars (duration, ease, onComplete...)

Returns: a Timeline.

Code Examples

const state = Flip.getState(".details, .full-screen");
detailsElement.classList.toggle("active"); // mutate DOM/layout
Flip.from(state, { duration: 1, ease: "power1.inOut" });

• What it demonstrates: the standard 3-step pattern — capture, mutate, Flip.from().

Key Takeaways

1. Resizing uses width/height by default; set scale: true to use transform scaling instead (cheaper, but can distort content differently).
2. Returns a Timeline, so you can chain more animations onto it.

Connects To

• Flip.getState(): supplies the state input.
• Flip.to(): the inverted version — prefer from() in almost all cases (see next chapter).