GSAP Lottie Tween

Animate Lottie Files Seamlessly with GSAP Scrolltrigger

Bring Lottie animations to life in Elementor with precise GSAP control. With the GSAP Lottie Tween, you can link Lottie animations to page scrolling, creating fluid, engaging experiences without writing any code. This feature makes use of Gloo‘s GSAP-ready Lottie Widget.

New GSAP Event Type – Lottie Tween

A new GSAP Event Type has been introduced: Lottie Tween. This unlocks specialized animation controls tailored for Lottie animations, allowing precise control over playback, starting frames, scrolling behavior, and more.

How to Link a Lottie Animation to GSAP

• Assign a Lottie IDIn the Lottie GSAP Widget, set a unique Lottie ID to identify the animation. Visit the Lottie GSAP Widget module page for more information regarding this Widget.
• Create a GSAP Event (Tween)Navigate to the GSAP Events panel and add a new event, make sure to set the GSAP Event Type to Lottie Tween.
• Define the Animation BehaviorThe Lottie Tween uses the same controls as other Tweens, except it does not include transformation options for compatibility reasons. Refer to the GSAP Scrolltrigger module page and the GSAP Scrolltrigger Overview for more information on how to setup the canvas, scrolling behavior, and other Event (Tween) options for every event type.

Pinning a Lottie animation

To keep a Lottie animation fixed until the animation completes:

• Add the CSS selector of the GSAP Lottie Widget in the Pin Settings field.
• Ensure that the same element is not pinned in multiple tweens, as this can cause conflicts.

It’s important to note that pinning the same element twice in two different GSAP tweens will result in unexpected and undesirable behavior. Only pin each element once.

More information on pinning in GSAP can be found in the GSAP Scrolltrigger Pin Functions Tutorial.