Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Share this post

Link to post
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

Share this post

Link to post
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 ;)

Share this post

Link to post
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.