Method needed to clone a TweenLite object so it be parsed into a TimelineLite instance

[James Hopkins]

A bit of background:

1. On bootstrap, I'm using jQuery's .data() to store a (paused) TweenLite object against an associated DOM element - there are 10 of these such elements.
2. I'm then iterating through these DOM elements, and appending a cloned TweenLite object to an array.

The reason I need to clone (using jQuery.extend()) each TweenLite object is because I don't wish to use the reference-based relationship that .data() uses; I simply want a clone of the object.

 

However, when I try this, I get an uncaught exception thrown, Cannot add [object Object] into the timeline; it is not a tween, timeline, function, or string. How can I get around this?

 

My codepen is

See the Pen sthBk by anon (@anon) on CodePen

 

Thanks for any help in advance

 

Cheers

 

James

[jamiejefferson]

Sounds like the 'clone' isn't a true clone, so GSAP doesn't understand what you're passing it. Clones of anything other than primitives are rather tricky in javascript - I'm not sure how easy it's going to be to get this to work.

 

Have you considered just saving the target, duration, and vars object in data(), and instantiating a new tween with those values when you need it? I imagine it would be much simpler than trying to get cloning to work.

[James Hopkins]

Thanks for the reply, Jamie.

 

Yes, I believe what you're alluding to would work; I just wanted to try and mitigate the overhead in instantiating multiple tweens on this event.

 

Cheers

 

J

[Jonathan]

Also to add to Jamie great advice..

 

If you look at this jsperf test.. using jQuery.extend()to clone is very slow:

 

Cloning an Object: http://jsperf.com/cloning-an-object/2

 

Maybe Jamies advice of saving the target, duration, and vars object in data() is faster approach?