Jump to content
GreenSock

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

GSAP + Waypoints

Recommended Posts

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×