AnimatiCSS

Look, how about this: https://codepen.io/animaticss/pen/JjeGgyV

Hello! I've tried to play with simply changing the timeScale of the animation, but it doesn't quite work well: https://codepen.io/animaticss/pen/ZEqdMmr?editors=1010 I suppose that from my code of the previous version, what would have to be done is to kill the registered animation and register a new one with the new direction of movement, although I don't know if that would work either, that's what I can think of to try .

Hello! This tween has been very good for me. They asked me for a "slider", with continuous autoplay and loop, which you can drag. Also, to stop when hovering over the slider and play when leaving. Also, they asked me to go from right to left, so I added the possibility to reverse it with the "direction" variable. I've created this codepen and I'm leaving it here in case anyone else needs something similar or just to get some new ideas. All the best! https://codepen.io/animaticss/pen/zYLjYQV

Thanks for trying, I will record the screen as soon as I can and attach the video

Observer with lockAxis: true. https://codepen.io/GreenSock/pen/BarGQgw

Yes, the problem persists.

Hello, LockAxis is a property added to Observer. Scrolltrigger can set an Observer with the ScrollTrigger.observe() method. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe() ScrollSmoother, it is still a ScrollTrigger. So can our ScrollSmoother set the .observe() to lockAxis true to solve the problem in this thread? Thank you

Version 3.11 with lockAxis: true would solve this bug, right? can it be added to scrollsmoother? this is where I get the error @GreenSock

Hello, first of all thank you for this fantastic library! I have created a codepen with the following problem: If you access from phone, when dragging on the X axis, scrolling on the Y axis is also applied! Since there is a slider, users will make that touch movement on the X axis to display more slides, but doing so breaks the user experience due to the issue I mentioned. Before, in version 3.10.3 this did not happen (with the same configuration that you see in that codepen). If you want to check the correct operation, you should use all the libraries in version 3.10.3 of GSAP (I don't know how to do it, right now there is V 3.10.4 in the codepen)

Hello, I come back to leave here the codepen with the solution! https://codepen.io/animaticss/pen/ExoedQg I relied on this code to finally give me the correct address. https://showcased.webflow.io/projects/gsap-infinite-scroll-onmousewheel-grab Actually, I ended up using ticker to make the .set of the Y position, it was necessary. But in this case applying a lerp animation. Anything to improve the code will be well received. The animation isn't exactly the same right now as it is in heycusp, aside from the rotations being exaggerated right now (not my concern), in heycusp's it seems that the nodes move a bit more in their Y if the node is in view, right? Any idea how to deal with this? Thank you!

Hello, thanks for answering! Your example moves further away from this, which is the goal: https://heycusp.com/ Thanks anyway, you give me more perspective with your code

Hello, I bring an improved version of the previous example. My problem now is, how can I apply an ease to the nodes? I want to get the effect of the menu of this website: https://heycusp.com/ Is the approach I am applying correct? Any other recommendation is more than welcome. https://codepen.io/animaticss/pen/rNprXpg

Thank you so much! I'm going to continue with that.

Hello, first of all congratulations for GSAP, it's amazing! I want to make an infinite scroll menu like on this website: https://heycusp.com/ I want to make it smooth. So I thought maybe Scrolltrigger.observe would be the way to go. The first step I wanted to do was to apply a transformY based on the scroll performed. In the codepen that I created, for some reason, self.deltaY returns a value that later returns to the initial point (doing a bounce and returning to the initial value) I don't understand what I'm doing wrong. Thank you very much!

this does not work, what it does is that you practically do not see the animation. The idea would be, in some way, first to launch the animations while you enter the Y axis, then go on to listen to the X axis? How to do that? Here I leave the codepen of what you say, and as you can see, it doesn't work, the animation is almost off the screen https://codepen.io/animaticss/pen/QWabKwB