Getting DOM elements out of timeline

[Gabriel]

I was looking for a way to get all the DOM objects animated in a timeline to feed into additional tweens or a selector engine. From the entire timeline, and/or currently being animated at a specific time index. I appreciate any help given

[Carl]

Hi and welcome to the GreenSock forums.

What you want to do is a fairly advanced procedure, but GSAP has mechanisms in place to handle it.

A few things to note.

Every tween has a target property which refers to the element(s) that it is tweening.

TimelineLite has a getChildren() method which returns an array of all its nested tweens and timelines. You can also choose to ignore tweens before a certain time. The method is very flexible. Check it out here: http://api.greensock.com/js/com/greensock/TimelineLite.html#getChildren()

TimelineLite also has an exportRoot() method which allows you to gather ALL tweens and timelines that have been created (and not garbage collected) and wrap them into a single TimelineLite. So technically, you could grab ALL tweened DOM elements regardless of whether or not they were in a timeline that you defined. Read about exportRoot() here: http://api.greensock.com/js/com/greensock/TimelineLite.html#exportRoot()

Here is an example of looping through tweens in a timeline and one "loose" tween and grabbing the targets of the tweens:

 

 

 

var tl = new TimelineLite();
tl.to("h1", 1, {left:200})
  .to("h2", 1, {left:200});


TweenLite.to("p", 1, {left:200, delay:2});


function getTweenedElements() {
  //use export root to place all tweens in a new TimelineLite
  var allTweens = TimelineLite.exportRoot();
  //get all the child tweens of the "allTweens" TimelineLite
  var childTweens = allTweens.getChildren();
  //loop through all child tweens and find the targets
  for (i = 0; i < childTweens.length; i++){
    //log the target of the tween
    console.log(childTweens[i].target);
    //change the color of the target DOM elements of all the tweens to red
    $(childTweens[i].target).css("color", "#ff0000");
  }


  
}


getTweenedElements();
 

 

 

See it in action here:

See the Pen 32686696dd755c75ab435373c6a1b3c9 by GreenSock (@GreenSock) on CodePen

Hopefully this helps you with what you have to do. If you need more info, let us know.

[Gabriel]

Oh wow, that was way easier than I expected. Very simple and concise in my mind. Thank you very much.

 

exportRoot, while not part of what I was looking for, is a very interesting function nonetheless. I had read about it in the docs several times, but still wasn't sure about it's purpose. I thought it was to transfer tweens from one timeline to another, which seemed of little use. A note in this function's documentation about all tweens and timelines being added to a master document-wide timeline would clear this up for others like me.

 

This is the most helpful forum I've ever seen, and is much appreciated