Jump to content


Replace target in Animation instance

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

Is that possible to change target of an existing tween (without recreating it like here)?
Or clone the tween or timeline with the current var-s and the new targets?
It's is important to use the same tween because it can contain some randomly generated var-s which aren't stored anywhere else.
I'm thinking on something like:

var animation = TweenMax.to(nodeFirst, 1, {x: Math.random()})

function duringTheAnimation() {
  time = animation.time()
  magicallyReplaceTargets(animation, nodeFirst, nodeSecond)

I'm experimenting with a tool to use React and GSAP together. The goal is to let React to rerender any time it wants during the animations while GSAP can directly animate the DOM nodes (not messing with the React component state). It's going well so far, but it would be great to solve the case when the component remount the targeted element.

See the Pen RPJMwM by azazdeaz (@azazdeaz) on CodePen

Link to comment
Share on other sites

Thanks Diaco!


Sorry if i wasn't clear enough, so here is my question:


I have a tween like this:

var myAnim = new TweenMax(someNode, 1, {x: Math.random()})

There is any possible way to create an animation which is identical to the myAnim but have an other target if the only information i have is the myAnim instance? 

Or can i change the target of the myAnim somehow?

(so i can't have a createAnim(target) function that creates the same animations with the specified targets)

Link to comment
Share on other sites



Since you need only the config options and perhaps the duration, you can access them by referencing the TweenMax instance:

var myAnim = new TweenMax(someNode, 1, {x: Math.random()});

console.log(myAnim.vars);//RETURNS => {x:value}
console.log(myAnim._duration);// RETURNS => 1

Although in the case of _duration, keep in mind that Jack and Carl have said before that every property/object starting with an underscroll is not intended to be accessed on a regular base, but since your duration is not random my guess is that you won't need it.

  • Like 2
Link to comment
Share on other sites

The target property of a tween is read-only. It can not be changed after the tween is created.


A possible hack might be to update child elements of the target, like you tween the position of a container div and then dynmically add/remove DOM elements in the container.


Diaco provided an excellent example of a function that returns a timeline you can modify it though to return a single tween if you need. This in essence allows you to apply the same properties and values to animations on multiple objects. I highly recommend this approach. You can combine it with Rodrigo's approach and pull values from an existing tween too

var referenceTween = TweenLite.to("#mydiv1", 1, {x:100, opacity:0.5, rotation:600})

function anim(elem, tween){
  return TweenLite.to(elem, tween.duration(), tween.vars)

var tween1 = anim('#mydiv2', referenceTween);
var tween1 = anim('#mydiv3', referenceTween);


Just for clarification can use .duration() no need to use the ._duration anywhere

  • Like 6
Link to comment
Share on other sites

Great! Thanks for your help!


Is it possible to clone a timeline and recursively all its children in a similar way?

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.