Jump to content
Search Community

define generic tweens for future reference without defining target element

annam test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm not sure if this is something obvious that I'm missing, I think that's a big possibility that that's the case :)


I want to pre-define some tweens, to trigger later on on any element.


So I want to create a new TimelineMax() instance and define the transition to occur, eg in a fromTo manner, I'll probably to add some sequential tweens, with an onComplete function etc. I want to do this on page load. 


Then at an undefined moment in the app, via user interaction, I'd like to run this already defined tween on an element.


Is this possible?


I guess I could do something simpler than this by simply having the options json object predefined and using it in a TimelineMax() instance in real time, but this will make it very complex to add sequential tweens or functions etc.


As a bonus, if the above is possible, would I also be able to override some of the properties on the predefined transition? eg the easing?




Link to comment
Share on other sites

Hi Anna,


As far as I know is not possible.


Due to optimization practices GSAP records every value when the instances are instantiated and that includes the target and the properties being tweened.


Fortunately there are a couple of ways for doing that, one option is create the config object and then apply it to an instance later on your code, another option is create a function that creates the instances for you passing the parameters that you might change. Normally when pointing to old browsers I use modernizr, which returns boolean values to some specific tests regarding the browsers capacities. Using that I create the config object:

var test1 = someTest, // this returns either true or false
    configObject = test1 ? {left:300, top:300, ease:Power2.easseIn} : {left:300, top:300, ease:Power4.easseIn};

// later apply the object to a instance

TweenLite.to(target, 2, configObject);

function createTween(easingParam)
  TweenLite.to(target, 2, {left:300, top:300, ease:easingParam})

// later call the function

As you can see is fairly straight forward and simple. Of course you can extend the function by adding more parameters and creating some conditional logic to use a default configuration in case some parameters aren't passed when the function is called:

function createTween(target, time, easingParam)
  // if no time is indicated use a default value
    TweenLite.to(target, 2, {top:300, left:300, ease:easingParam})
  // if a time is defined pass that one
    TweenLite.to(target, time, {top:300, left:300, ease:easingParam})


  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...