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

Hello, thanks for answering. That does not solve my problem, because if you leave the box aligned to the left as in my codepen, it continues to launch as in my example. Yes, what I want to do makes sense, the problem is how I approach it.

Hi, I created a codepen where a horizontal scrolltrigger is used. If you look at box-1 in the red panel, although it is waiting to hear the X axis, it appears already animated, how can we make it wait until we are inside the ".pin" element first? I need to be able to tell box-1: hey, wait until we're in the red panel first and then start controlling the X axis. It's possible? Thank you very much!

Hi, thanks for your response. I imagined that it could not be done, but I wanted you to confirm it, in case there was some kind of hack that I did not know. Thanks!

Hello, first of all congratulations on the great work with this library. When using GSAP + Locomotive Scroll, if I assign the data-scroll-section attribute in the sections to improve performance (as locomotive suggests) then, if we have a Scrolltrigger animation using .pin, it breaks. I imagine because it modifies the DOM by adding a parent above said section. What can we do to solve this problem? Here I leave a codepen with a demonstration of what I say: https://codepen.io/animaticss/pen/wvqGBMM Thank you!

I have gotten it to work through events, this solution should be able to implement it. I just modified in the CSS the selector .expandable> div {} I removed the transition and assigned it by default height: 100px; Then I created a custom event called "recalc" to recalculate the position of the ScrollTrigger when launched. In APP2 I modified the animation (now it is done with GSAP) so that when the animation finishes we can launch what we need (dispatch of the custom event created by us); https://codepen.io/animaticss/pen/ExZrZmQ All the best!

In that case, the approach I mentioned will not work. Maybe in your case you should play with the DOM events. For example, when APP2 is updated, launch the X function that updates your APP3 (i.e., launch ScrollTrigger.refresh ());) Then I try to mount a codepen with this solution in case it works for you. All the best!

Hi! Yes, I mean exactly that, React Context API. Actually the focus of your code should be 1 app that contains components, and not a mix of different Apps. Is for some reason that focus in your code? Look here I have organized your code by components within a general APP. Now it is better focused to add the global context. If you give me more time, then I will add it in another codepen. https://codepen.io/animaticss/pen/PoWVwKm All the best!

Hello! From what I understand, you want your app2 to finish opening or closing, another component (app3) makes a scrolltrigger.refresh() to recalculate its start and end positions. To inform app3 that app2 has finished animating, you can do so in a number of ways. For example, you could add a global context that has a state inside that is: const [changedHeight, setChangedHeight] = useState(false); This state determines a value throughout your website to inform you if the height of the website has changed. In app2, you access that global state and once you click to open that component, once it finishes opening, you could launch something like this: setChangedHeight(!changedHeight); At that moment, that value will change informing that the height has been updated on your website. It does not matter if the value is true or false, what matters is that it has changed. In app3 you should have a useEffect in your code and add the dependency on whether your changedHeight changed. Something like that: useEffect (() => { Scrolltrigger.refresh(); }, [changedHeight]); This useEffect will only be fired when the value of changedHeight changes. Another point, you have to correctly inform when your animation finishes in app2, maybe it would be a better approach with gsap, since when finished you can use a .call() to do: setChangedHeight (!changedHeight); Unfortunately I'm on mobile and I can't write code correctly, but I think this explanation can give you some ideas. All the best!