Romanus

Hey! I forgot how to find scroll direction in ScrollTrigger. onUpdate fires a lot of times. And I need only when the direction changes. I looked in the documentation and couldn't find

Thank you! Your solution works. But why does the example with the error work better? In this example, the animation starts much earlier https://stackblitz.com/edit/nextjs-sh4zey?file=app%2Fpage.js I wrote this question on stackoverflow, if I learn something new I will let you know. I'm trying to see if it's possible to run JavaScript instantly without getting an error)

Thank you! It works. But there is something that I cannot understand. In your fork, you are using useEffect but not importing it from React. This is causing an error in the console. https://stackblitz.com/edit/nextjs-sh4zey?file=app%2Fpage.js If import useEffect then the problem returns. Is it possible to get rid of the error and solve the problem? https://stackblitz.com/edit/nextjs-rh3rpj?file=app%2Fpage.js

Unfortunately, the problem is not the lack of context. next js only sends html at first, then loads js a second later. I made the problem more visual. In the fromTo function, the color should change from blue to red. But the first second it's black because the js didn't load. Because of this, I cannot use from and fromTo normally, and scrollSmoother also does not start immediately, the first second of movement is sharp and all pins do not work example - GSAP NextJS test - StackBlitz

gsap.from doesn't work correctly in next js. I want the text to go from opacity 0 to opacity 1. But in next js javascrypt works with a delay. Because of this, opacity is 1 - 0 - 1. to see the problem, open the link (in the screenshot) in a new tab, noticeable only when first opened. Is it possible to solve this somehow? The only option I see is to manually set the opacity to 0 and use gsap.to. But this is not convenient in some cases. GSAP NextJS App dir (forked) - StackBlitz

Hello! Recently Next js has been updated to version 13. Added app directory. I have a server component, the text in which is loaded from the database. I would like to animate this text using gsap. I can't figure out how to do it right. Animations can only be added in client components, and loaded from the database only in server components. I would be very grateful for an example with good practice Next 13 and gsap

Hello! I am using React. In the App component, I create a context. In a nested Button component, I create a timeline. How to add this timeline to context? I tried to declare context in useRef and pass it to the button component. But it caused me a lot of errors. How to do it right?

Hello! I'm trying to pin section 1 so that section 2 moves up while the first one doesn't move. I tried Pin, but I ended up making the scrollbar bigger. While the first section does not move, the second does the same. How to achieve the desired result?

Hello!) I have a ScrollTrigger animation. I'd like to change the color of the cube halfway through. How can i do this?

Hello! I am using gsap in react. I would like to put all the animation logic in the component that is being animated. In order for the MenuPage animation to be found in MenuPage. But I put this animation in the parent component, because it contains the state responsible for the variable rendering. I start the closing animation, and then I remove the element. When I want to make changes, I have to remember exactly where the animation is. This started to bother me when I made a lot of modal windows and started to fine-tune the structure of the application. I want everything to be in place Maybe somehow you can register the animation in one place, and call it in another. Or maybe you have ideas how to make it more convenient. If you need I can make an example to illustrate the question

Hello! I am using Smooth Scrolling. And I want to be able to completely stop scrolling and resume. What function should be written for this?

Thank you!) Good advice. But I got a strange problem when I tried to replicate this code in my application. I get an error - Uncaught TypeError: gsap__WEBPACK_IMPORTED_MODULE_14__.default.context is not a function I do everything exactly the same as in your example. I will try to fix it or repeat it on codepen. But for several hours I can not understand what's wrong. Can you guess why this is?)

Hello! I'm trying to get a React component to fade in and out smoothly. I don't understand what to do next. Help me please

Hello! In my example, on mouse click, two svg dots are raised. I would like to animate each of them individually so that each one has a random duration. Is it possible?

Hello! I found a smooth scrolling site. All elements move very smoothly. I googled for a long time, but did not even find a similar example. Any ideas how this can be repeated? https://www.sweetpunk.com/en/