supamike Posted March 26, 2020 Share Posted March 26, 2020 Hello, I am trying to use GSAP with Waypoints. It seems it works well but I still wonder if it's the correct way to do it. So I have an element that have a loop animation that never end. I just want the animation to stop when off screen, and run again when on screen. On the codepen demo, it's not obvious but when we open the devtools, we can see the transform property stopping when the element is offscreen, and then playing again when it appears. So yes, it works as expected, but I just want to be sure I am doing it properly, as my goal is to make 4 or 5 loops animations in the same page but only the visible ones will run (so it won't slow down the page too much). Thanks, Mike See the Pen wvaQdqe by supamike (@supamike) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 26, 2020 Share Posted March 26, 2020 Hi @supamike, Your code looks good to me. Only thing I see is that you're passing direction into your function and not using it—not a big deal, just noticing. Also, if you're interested, this is pretty easy to do without the waypoints library, using intersection observer api: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 6 Link to comment Share on other sites More sharing options...
supamike Posted March 27, 2020 Author Share Posted March 27, 2020 Thank you for the link, it's very interesting, but I will stick with Waypoints as it's a bit easier to use and I kind of like it 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