supamike

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

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

Thank you very much for your fast and detailed answer. It makes sense now, the first way is the easiest. But I love the fact that there are other ways. It's going to be very useful to know all of that Thanks again

Hi, It looks like something simple but I still didn't figure out how to do that. So I have a rectangle, that I rotate with gsap.set. I just want to do a simple loop animation, just like the red rectangle in the codepen example (a CSS keyframe animation). The blue rectangle is what I am trying to do with gsap, but failed. How to do the same animation? Thank you Mike