Chapter 239: Flip.fit()

Core Idea

Repositions/resizes one element so it visually occupies the same area as another element (or a saved FlipState), instantly by default or animated if a duration is supplied.

Reference Tables

Parameter	Type	Description
targetToResize	String | Element	the element to move/resize
destinationTargetOrState	String | Element | FlipState	the area to fit into
vars	Object	standard tween vars (duration, ease, onComplete...) plus absolute, fitChild, scale

By default alters x/y/rotation/skewX + width/height; with scale: true uses scaleX/scaleY instead.

Code Examples

Flip.fit(".box1", ".box2"); // instant
Flip.fit(".box1", ".box2", { duration: 1, ease: "power1.inOut" }); // animated

Key Takeaways

1. fitChild lets you fit based on a child element's box instead of the target's own — useful for nested layouts.

Connects To

• Flip.from(), Flip.to(): the more general full-state Flip animations; fit() is specifically for matching two elements' areas.