Kezart Posted September 28, 2021 Share Posted September 28, 2021 Hi, I'm facing a problem that i can't overcome. I'd like to execute multiple timeslines at the same time when a div enters the viewport, but can only manage to fire one at a time. And of course the animations have to reset on leave, so that they can be played again (which is done, but is not instantaneous so it's a problem for longer timelines and thus need improvements if possible). How can this be accomplished ? (also if you have a in-house solution instead of using .onScreen(), i'll gladly use it) (GSAP related JS starts at line 163 "// ANIMATIONS HERE") Thank you in advance See the Pen bGROOmm by Kezart (@Kezart) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 28, 2021 Share Posted September 28, 2021 Hi Kezart, There really isn't an equivalent to OnScreen with GSAP, and we really don't have the resources to help with logic issues. Please see the Forum Guidelines. I think your best bet might be to attach your animations to your elements. Then you can play/pause/restart/reverse them on demand. let myElement = document.querySelector(".foo"); myElement.animation = gsap.timeline() .to(myElement, { x: 100 }); ... myElement.animation.restart() ... myElement.animation.reverse() Link to comment Share on other sites More sharing options...
OSUblake Posted September 28, 2021 Share Posted September 28, 2021 Hi @Kezart You had so much code in your demo, I didn't even realize you were using the ScrollToPlugin. That's we ask for a minimal demo, so we can focus on the issue on hand without any other code and styling distractions. Since you're just scrolling to change the position, you should be able to leverage ScrollTrigger to play and reverse animations when you scroll to a certain section on your page. https://greensock.com/docs/v3/Plugins/ScrollTrigger 1 Link to comment Share on other sites More sharing options...
Kezart Posted September 29, 2021 Author Share Posted September 29, 2021 (edited) Hi, So in the end i changed a bit the way i call the timelines (now they can run simultaneously) , and created a function to clear the timeline props from the dom to "reset" the timelines (called on 'leave'). It works fine like that function clear(selector) { var tl = gsap.timeline(); tl.to(selector, 0, {clearProps:"all"}); } edit : also codepen has been updated if anyone wanna take a look Edited September 29, 2021 by Kezart codepen updated 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