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 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

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.
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.
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.
THIS FEATURE IS PART OF :

More Modules

Dokan Dynamic Tags
Time Span Form Field New
Globals Dynamic Tag
Custom DB Value Dynamic Tag New
JetEngine Dynamic Visibility: LearnDash Addon
GTM DataLayer Form Action
Price+ Widget New
GSAP Standard Event
Buddyboss Groups Dynamic Tags New
Related Products Dynamic Tag
Ajax Reload Prevention New
Jet Relation Field Tag New
Dynamic Nav Menu
Dynamify Repeaters New
Signature Field
Mouse Follow Effect New
BuddyBoss Dynamic Tag Kit
Cart Values Dynamic Tag New
OpenAI Form Action New
Ajax Connector