GSAP Custom Tween

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

watch the GSAP Custom Tween tutorial

Play Video

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.


More Modules

GSAP ScrollTrigger
Random String Dynamic Tag New
WooCommerce Advanced Dynamic Tags New
ACF Relationship Tag
Google Adsense Widget
Terms Field
Wysiwyg Field
Community Dynamic Tags New
Signature Field
JetSmartFilters: BuddyBoss Addon New
Image Upload UI New
BuddyBoss Dynamic Tag Kit
Calculation Field New
GSAP Video Scrolling
Cookies Connector New
User Agents Dynamic Tag
Related Products Dynamic Tag
Cookies Dynamic Tag New
Country Dial Code Field New
Frontend Post Submission