Clone reference to tween?

[ElliotGeno 27 Likes (Newbie)]

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
     object.addEventListener(event,function(e){

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

[Jonathan 5,176 Likes (Superhero)]

Hello ElliotGeno,

 

Have you looked into exportRoot()

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/exportRoot/

 

[Carl 9,066 Likes (Superhero)]

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. 

 

Elliot, 

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);
//addEvent(".bob","mouseout",TweenMax.to(".bob",2,{backgroundColor:"#333"}));


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

 

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

//onmouseover
this.animation = getNewFancyAnimation()
//onmouseout
this.animation = customReset()

[Carl 9,066 Likes (Superhero)]

oh, here's the pen: http://codepen.io/GreenSock/pen/oXreVK?editors=001

[GreenSock 8,117 Likes (Superhero)]

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