Jump to content
GreenSock

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

Timeline Stagger Confusion

Go to solution Solved by GreenSock,

Recommended Posts

I am brand new to GSAP, so I know there is something obvious and simple I am missing but I've been struggling to figure out what to do. My goal is to have objects fade in and scroll down to the page, then fade out shortly before they reach the bottom of the page.

 

In the fade out stagger, I have it start 2.1 seconds before the end of the previous timeline and fade out over 2 seconds. However, it does not begin until 2.1 seconds before the final box arrives at the bottom and then proceeds to fade and stagger out. I can tell it is linking that fade out to the end of the entire animation time established in the first two lines causing the problem since the more divs I have, the longer it waits to start those fades. How do I have that next operation sync properly? Thanks!

See the Pen WNGpoQL by miketwalker (@miketwalker) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums and the wonderful world of GSAP, @miketwalker

 

You just need to base your timing off the number of elements you're staggering. Here's a corrected fork of your codepen: 

See the Pen 2cebe760d96fd703c4a19002bf415d86?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And there's an alternate approach that uses keyframes and a loop in there in case that seems more intuitive for you. Either one is fine. It's just that in some cases, it can get a little mind-bending to work out lots of timing stuff in multiple staggered animations on the same elements so it can make more sense to just do one sequence at a time, and lay those out individually on a timeline chunk by chunk. There are actually lots of ways you could approach this.

 

Here's one more that uses a modular function so you can just focus on one at a time: 

function test() {                
  var div = gsap.utils.toArray(".textdiv"),
      stagger = 2,
      tl = gsap.timeline();
  // loop through and for each element, feed it to slideDown and insert the resulting animation into the timeline in a staggered way
  div.forEach((el, i) => tl.add(slideDown(el), i * stagger));
}

function slideDown(element) {
  var tl = gsap.timeline();
  gsap.set(element, {xPercent:-50, left:"50%", opacity: 0, yPercent:100, top:"0%", position: "absolute", overwrite: true});
  tl.to(element, {opacity: 1, duration: 2})
    .to(element, {yPercent: -100, top: "100%", duration: 12, ease: "none"}, 0)
    .to(element, {opacity: 0, duration: 2}, "-=2");
  return tl;
}

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Thank you, as I have been reading the documentation and experimenting, this has been incredibly helpful. You and your team have built a fantastic tool that I am excited to begin using. I truly appreciate you both providing an easy to grasp the fix to my rushed wireframe mess and showing me a much cleaner way to approach it.

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