Jump to content
Search Community

Stagger .each element and adding a timeline to an existing one

puluch test
Moderator Tag

Go to solution Solved by Diaco,

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

Hello,

first of all thanks for your amazing technology ! 

 

I'm trying to insert a timeline in another in the aim of tweening multiples <div> in the way of the .staggerTo method. I would like that all these elements have a random / single parameter.

 

The result i'm looking for could be this : 

See the Pen OPbeQd by anon (@anon) on CodePen

           i'm obtaining this by "cheating" with a 1 second delay for the triggering of the "tl2" timeline... 

 

 

I found the for loop method associated with .each but didn't understand how to have multiples tweens in the timeline ( in the exemple that I gave, the inner <div> of the square are appearing randomly but, what if I want to have another tween in this timeline after this effect ? Do I have to wait for the end of the first loop to set a new timeline with a new loop that i'll trigger then ?

 

Is there a simple way like the "staggerTo" to have this result : with the random effect obtained by the for .each ?

 

Thanks a lot for your time and answer !

 

PS : sorry about my poor english and the possible "newbieness" of my question, i'm stuck here for a while and i'm just loosing my mind  :-o

 

 

See the Pen ogYKjP by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi puluch  :) , Welcome to the GreenSock forums.

 

With .add() you can add a tween, timeline, callback, or label (or an array of them) to the timeline. 

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/

 

pls try something like this :

 

var tl = new TimelineMax({repeat:-1}),
    tl2 = new TimelineMax();

for (var i=0; i < 25; i++){
$('<div></div>').appendTo('#square');
}

$('#square div').each(function(){
tl2.to(this,0.3,{opacity:1},Math.random());
});

tl.from('#square',1,{x:-1500})
.add(tl2)
.to('#square',1,{x:1500},"+=0.5");

See the Pen JobgqV by MAW (@MAW) on CodePen

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.
×
×
  • Create New...