Jump to content
GreenSock

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

A timeline for each element in sequence

Recommended Posts

Hi all,

 

In my codepen attached I have each box randomly positioned, and then I am running a timeline that staggers through from opacity 0, then a left or right movement, then goes to opacity 0 again. At the moment this is staggering through, but what I want is for each box to run as their own timeline and in sequence. So I want the first one to fade in from 0, move it's "cover", then fade out to 0. Then the next one would do that same animation. I attempted to use an each function but couldn't seem to get it to work right. Any solutions?

Thanks,

Oliver

See the Pen mEKbvJ by olichalmers (@olichalmers) on CodePen

Link to post
Share on other sites

Hi Oliver,

 

I see two alternatives.

 

One is to create the timelines using the loop and adding a delay on the first instance of each timeline to create the stagger effect:

var els = $(".element"),
    stagTime = 0.5;

els.each(function(i,e){
  var tl = new TimelineLite();

  tl.to({}, (stagTime*i), {})
  // then the animation
});

The other option is to create the timelines and push them to an array. Then add them to a master timeline using the add method with the stagger parameter:

var els = $(".element"),
    master = new TimelineLite();
    stagTime = 0.5,
    tlArray = [];

els.each(function(i,e){
  var tl = new TimelineLite();

  // animation code here

  // finally to the array
  tlArray.push(tl);
});

master.add(tlArray, 0, "normal", stagTime);

http://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/add/

  • Like 5
Link to post
Share on other sites

If I understand your goal correctly, all you need to do is alter the stagger and use the position parameter...

 

The stagger would be 1.5 because that's how long it takes for each of your 3-step animations to finish (3 x 0.5)

 

The position parameter just tells it where to start putting them into the timeline. So the first stagger would start at 0 of course, the second batch would start at 0.5 (because that's when the first tween would be done), and the final position parameter would be 1 (because that's when the first 2 tweens would be done). 

tl.staggerFromTo(".box", 0.5, {opacity: 0}, {opacity: 1}, 1.5) 
  .staggerTo(".box .cover", 0.5, {
    cycle: {
      xPercent: [-101, 101]
    }
  }, 1.5, 0.5) 
  .staggerTo(".box", 0.5, {opacity: 0}, 1.5, 1);

Is that what you were looking for? 

 

Rodrigo's solutions are all totally valid too of course. 

  • Like 4
Link to post
Share on other sites

Thank you both so much for your awesome replies.

 

Jack - I can't believe it was that simple as this has nailed what I was trying to do. Rodrigo I managed to get your second one to work well too!

Thanks guys.

  • Like 2
Link to post
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.

×