Jump to content


GSAP + Waypoints

Recommended Posts

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).



See the Pen wvaQdqe by supamike (@supamike) on CodePen

Link to comment
Share on other sites

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

  • Like 6
Link to comment
Share on other sites

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

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.