Jump to content
Search Community

Clone reference to tween?

ElliotGeno 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 was curious if there was a way to clone a reference to a tween. Similar to how TimelineMax.add( TweenMax.to("blah",.5,{x:50}) ); can include any sort of tween method in it as an argument and call it at a later date.


For example:


I want to create a generic method that could clone any reference any type of tween or timeline... kill or somehow pause that tween from the argument... then call a new tween or cloned tween at a later date.


Like this:

addEvent(element,"mouseover", TweenMax.to(element,.5,{backgroundColor:"red"});
addEvent(element,"mouseout", TweenMax.to(element,.5,{backgroundColor:"grey"});

function addEvent(object, event, tweenObject){
// clone and kill or delay event

          // trigger new cloned tween on event


This is simplified from what I am trying to do... Hopefully I am being clear enough! Assume that we don't know the Tween type or Timeline method we are calling. I'd hate to have a ton of conditional logic that detects what type of tween or which method to call.

See the Pen EjBvyE?editors=001 by pyrografix (@pyrografix) on CodePen

Link to comment
Share on other sites

Yes, exportRoot basically grabs all existing tweens and timelines on the root and places them into a new timeline (so that you can control them all globally). However, it doesn't really copy them. In fact, there is no support for cloning or duplicating any animation objects. 



not sure I understand what your end result needs to be, I would suggest you explore using unique functions that spit out new animations for any target on demand.


I modified your pen slightly just to show how each object could have its own animation property which can point to any tween or timeline that gets generated by a function. Each object really has no idea whether or not its animation is a complex animation (timeline) or single tween.


addEvent(".bob","mouseover", complexAnimation);

function addEvent(objects, event, tween){
  // kill or pause tween somehow
  for(var i=0;i<objects.length;i++){
    var object=objects[i];
    object.animation = complexAnimation(object);


Typically for rollover / rollout effects I would modify this further just so that each element will toggle a this.animation.play() and this.animation.revers() on rollover and rollout.


If you want totally unique animations on rollover / rollout I would suggest that each time you trigger one of those events you call a function that gives you new animation on demand. something like

this.animation = getNewFancyAnimation()
this.animation = customReset()
  • Like 2
Link to comment
Share on other sites

Yeah, I was having a tough time understanding the goal/value here. It should be pretty easy to crank out new tweens however you want. Cloning has very limited value and can actually be MORE expensive because it requires copying a bunch of data, clearing out other data, etc. It's just cleaner to feed a config object (or a clone of it) to a tween/timeline. Maybe I'm misunderstanding your question/suggestion though. 


Oh, and the timeline.add() method doesn't do any cloning. Like Carl said, it just drops that instance onto the timeline (and removes it from its current parent if necessary).

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