Jump to content

James Hopkins

Method needed to clone a TweenLite object so it be parsed into a TimelineLite 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

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





Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.





Link to comment
Share on other sites

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?

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.