gigito78 Posted September 3, 2020 Share Posted September 3, 2020 Hello guys and thanks for your product, it's great! I have a animation that i would like to go on pause when user scroll out from viewport. I was thinking to use scrolltrigger + onleave callback but i couldn't reach my goal. Can you help me? Thanks, Luigi See the Pen GRZOZay by gigito78 (@gigito78) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted September 3, 2020 Share Posted September 3, 2020 Hey @gigito78. I am not really sure I understand, but there isn't really anything to scroll in, in the first place. So it is not quite clear what you want to achieve and what could possibly be wrong with what you're trying. Could you maybe update your codepen to make your issue clearer for others ? 2 1 Link to comment Share on other sites More sharing options...
gigito78 Posted September 3, 2020 Author Share Posted September 3, 2020 Hello akapowl and thanks for your response. I edited my pen. My timeline tlfumo (between red div and green div) is activated from scrolltrigger - trigger: "#icone-fiamma". I would like simply that when i scroll down to green div the animation is paused, instead at the moment it is calculated indefinitely Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 Hey gigito78 and welcome to the GreenSock forums. I think you're going for something like this? See the Pen NWNwpKP?editors=0010 by GreenSock (@GreenSock) on CodePen I recommend going through the GSAP getting started article, the ScrollTrigger documentation, the GSAP 3 migration notes (because you're using the old syntax), and my article on animating efficiently as I think you'd learn a lot from each of them. Maybe not all in one sitting, but feel free to if you want 1 1 Link to comment Share on other sites More sharing options...
gigito78 Posted September 3, 2020 Author Share Posted September 3, 2020 Hello Zach! thanks: toggleActions: "play pause play pause" did the trick! I noticed also that you removed the string "delay: index * 1". The only problem is that now my 3 divs "icona-fiamma" are animating one after another. I would to animate together, with a little delay like before, but i'm not sure about how to proceed correctly Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 It's probably a good idea to use a sub timeline: See the Pen abNVJLj by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 4, 2020 Share Posted September 4, 2020 If all you're doing is staggering some things then you can just use GSAP's stagger: See the Pen poydeLr?editors=0010 by GreenSock (@GreenSock) on CodePen If this is a stand in for more complex animations you can generate keyframes more dynamically: See the Pen oNxoZEV?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
gigito78 Posted September 4, 2020 Author Share Posted September 4, 2020 Sorry Zach i think to be more confused. I would like to retry: I would like to reproduce (more or less) this coffee steam effect: https://www.pinterest.it/pin/521291725601208264/ I would try to semplify my code so i reedited my pen: See the Pen GRZOZay by gigito78 (@gigito78) on CodePen also added a ID to every flame Supposed that: -timeline is the same for all 3 flames. -the only parameter that should be different for every flame is the initial delay. which is the simplest and cleanest way to change only the initial delay to a single flame? (i think based on flame id or index?) Link to comment Share on other sites More sharing options...
akapowl Posted September 4, 2020 Share Posted September 4, 2020 Hey @gigito78 This probably isn't the beast solution, but I still wanted to give it a shot. I couldn't wrap my head around how you could possibly get that specific progression of animating 2,1,3 with the use of the elements' index, so I thought, your approach with different IDs was a good starting point. I used classes in my example though - 'uno', 'due', 'tre' - and combined that with a gsap.utils.toArray()-function, in which I check if the element has a certain className first, and then set a variable for the delay, depending on the progression, that is wanted. You'll notice, that the first tween in the tlfumo-timeline is an empty tween, that is only there to set the total duration of the timeline for each item to two seconds - because without it the individual timelines would have different total durations due to the different delays. tlfumo .to(element, { duration: 2.0 }, 0) .to(element, { y:-75, duration: 1.5 }, thisDelay) .to(element, { opacity: 0.5 }, thisDelay) .to(element, { opacity: 0 }, 1.0 + thisDelay) ; I don't know, if there is a better way to prevent those different durations - probably is. But alltogether this works just fine - give it a shot and fiddle around with the durations if you like - until somebody comes around with a cleaner approach, of course 😋 See the Pen fd0ce686508181197061b47fd1cd743d by akapowl (@akapowl) on CodePen Cheers, Paul 1 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 4, 2020 Share Posted September 4, 2020 I'd probably do it using sub timelines like I said before. But there are lots of ways of doing it as seen in how many different approaches we've posted See the Pen poydVWe?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
gigito78 Posted September 8, 2020 Author Share Posted September 8, 2020 Thank you both, i liked both approaches and learned various things from your examples! It's my second animation with gsap and i wanted to learn how to use staggering in this situation (but will be for next time) Edited my codepen in case other peoples have same problem as me See the Pen GRZOZay by gigito78 (@gigito78) on CodePen Good work, Luigi 1 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