lottie-bodymovin

Use lottie-react with the animationData prop, then call methods like playSegments, setSpeed, setDirection, and goToAndStop on the animation instance. Event listeners such as complete and enterFrame let you trigger secondary animations at specific frames.

Animate Scale X and Y inversely in After Effects before export, using the expression s = transform.scale[1]; [100 + (100-s), s]. At runtime you can adjust the squash timing by changing playback speed with lottie.setSpeed.

Yes, use anim.playSegments([start, end], true) to play a specific frame range, such as frames 0-10 for an anticipation wind-up. You can chain segments with setTimeout or event listeners to sequence poses.

Yes, attach onMouseEnter and onMouseLeave handlers to the Lottie component and call anim.setDirection(1) or setDirection(-1) to play forward or reverse. The lottie-interactivity library provides additional scroll and cursor-driven controls.

Timing depends on the frame rate chosen at export: 24fps feels cinematic, 30fps smooth, and 60fps fluid. Apply Easy Ease (F9) and adjust Bezier curves in the After Effects Graph Editor, then fine-tune with anim.setSpeed at runtime.