Timelines are objects or values?

[kez1304 7 Likes (Newbie)]

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:

tl.seek(1);

Would this change be represented within:

$('body').data('someTimeline').play();

And vice versa?

 

 

Thanks a lot!

 

[Jonathan 5,176 Likes (Superhero)]

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
  $(el).on("mouseenter",function(){
    //this.animation.play();             /* get timeline object from javascript object */
    $(this).data('someTimeline').play(); /* get references timeline object */
  }).on("mouseleave",function(){
    //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?

[Tahir Ahmed 93 Likes (Contributor)]

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.

[kez1304 7 Likes (Newbie)]

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!