miketwalker Posted December 15, 2020 Share Posted December 15, 2020 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 More sharing options...
Solution GreenSock Posted December 15, 2020 Solution Share Posted December 15, 2020 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! 4 Link to comment Share on other sites More sharing options...
miketwalker Posted December 15, 2020 Author Share Posted December 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 15, 2020 Share Posted December 15, 2020 Great to have you on board, @miketwalker. Enjoy the tools! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now