GSAP Custom Tween

Anymate anything and everything with Gloo's GSAP Custom Tween.

watch the GSAP Custom Tween tutorial

Customize and animate with full freedom using Gloo’s GSAP Custom Tween.

GSAP Custom Tween allows you to freely customize your own GSAP Tween by writing your own JavaScript lines. This is an advanced feature, as such, if you haven’t already, it’s advisable to start from the other GSAP Event Types. These are:

GSAP Standard Event type
GSAP Split Text
GSAP Line Drawing
GSAP 3D-Model Event Type (using the 3D Model Widget)
GSAP Elementor Video

GSAP Custom Tween

Usually, when selecting other Event Types like the Standard Event in GSAP ScrollTrigger, Gloo writes and runs GSAP JavaScript code for you according to what you’ve set up in the Elementor Editor options provided by the feature.

However, for more complex cases, we may want to write our own JavaScript to make sure that the tween we’re adding will do exactly what we want it to do, for example if we need to implement complex callback functions or do some logic between Tweens. This is possible using the GSAP Custom Tween Event Type, by writing our own JavaScript in the special field that appears as soon as we select this Event Type in Gloo’s GSAP.

Scope : Extension

Dependencies: Elementor

Frequently Asked Questions

How does the GSAP Custom Tween feature in Gloo differ from other GSAP Event Types?

The GSAP Custom Tween feature in Gloo provides users with full freedom to customize their own GSAP Tweens by directly writing JavaScript code. Unlike other Event Types which offer pre-defined functionalities, the Custom Tween allows for advanced customization and intricate control over animations.

What are some scenarios where utilizing GSAP Custom Tween would be beneficial?

GSAP Custom Tween is ideal for complex animation sequences that require precise control and customization. For instance, users may leverage this feature to implement intricate callback functions, manipulate multiple elements simultaneously, or execute specific logic between tween animations. It’s particularly useful for developers and designers seeking to achieve highly tailored and dynamic animations.

How does GSAP Custom Tween work within Gloo?

To effectively utilize GSAP Custom Tween within Gloo, users first select this Event Type, which prompts a special JavaScript field to appear. Here, users can input their custom JavaScript code to define the desired animation behavior. It’s advisable to have a solid understanding of GSAP and JavaScript to maximize the potential of this feature. Additionally, users can experiment with different parameters and functions to fine-tune their animations and achieve the desired visual effects.