Jump to content


Timelines are objects or values?

Go to solution Solved by Jonathan,

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

Hi guys,
Looking for just a quick yes or no, as its been a long day, and I can't find the energy to write a full demo/test.
If I create a timeline like:

var tl = new TimelineLite();
tl.to('.someClass', 3, {height: 100});

Then I save that timeline in a data attribute like:

$('body').data('someTimeline', tl);

Are these then referencing the same timeline, as an object? Or has it just copied over the values, as a variable?


As it's instantiated, I'd assume it's being used by reference, but I can't be sure.


In case I'm not clear enough, if I were to run the following:


Would this change be represented within:


And vice versa?



Thanks a lot!


Link to comment
Share on other sites

  • Solution

Hello kez1304, and Welcome to the GreenSock Forum!


The Short Answer is ... Timelines are objects!


Long Answer .. well see below:


You can see in this example that im storing each timeline instance within the data attribute of each element.


See the Pen OMyqQO by jonathan (@jonathan) on CodePen


You can see below, that right above each data attribute set and get commented out. That i was originally just storing the timeline within a javascript object.

// set some global properties
TweenMax.set(".item", {transformOrigin:"50% 50%"});

// loop through each element
$(".item").each(function(i, el) {
  // set some individual properties
  TweenMax.set(el, {backgroundColor:'#' + Math.floor(Math.random() * 16777215).toString(16)});
  // create random bg color for each hover 
  var randColorHex = '#' + Math.floor(Math.random() * 16777215).toString(16);
  // create a timeline for 'this' element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  var t = tl
          .to(el, 0.4, {x:25, borderRadius:15, backgroundColor:randColorHex, ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  //el.animation = t;            /* set timeline object in javascript object */
  $(el).data('someTimeline', t); /* or set timeline with jQuery collection wrapper object */

  //create the event handler
    //this.animation.play();             /* get timeline object from javascript object */
    $(this).data('someTimeline').play(); /* get references timeline object */
    //this.animation.reverse();             /* get timeline object from javascript object */
    $(this).data('someTimeline').reverse(); /* get references timeline object */

So to answer your question it stores and references that timeline as an object with the data-attribute value, but the timeline is an object.


Does that answer your question? :)

  • Like 4
Link to comment
Share on other sites

It would. If I understand it correctly, the change will be represented across. Both are referencing the same `tl` instance. Take a look at this for a demo and observe the log messages in your browser's console window.

  • Like 1
Link to comment
Share on other sites

Awesome guys,


Thanks for your speedy replies, and fantastic examples.


You've confirmed my suspicions, which is great news. :)


I have a new issue, but I'll make a separate post about it.


A big thanks to both of you!

  • Like 4
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.