Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gabriel

Getting DOM elements out of timeline

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
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.
×