Romanus

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/

I redid my example. It works perfect. But I feel like I've chosen the wrong path. It turns out that I create a new timeline for each page. What if there are 10 or 50? It seemed to me that choosing a variable as a target and changing it depending on the page would be the right solution, but I did not succeed. I am new to GSAP and would like to understand how to make the animation code as short and scalable as possible. Please look at my code and tell me how to fix it.

Please show with an example how to update the timeline correctly. I would like to be able to play it in reverse when pressed again.

Hello! Please help me understand how it works. My goal: I click on the Page1 button - Page1 opens, I click again - it closes. And so with any Page. I specified a variable as target. When I click on the button, I change its value and play the animation. But GSAP doesn't see the new value. How to do it right?

In your example, pause after each play. I would like to make a smooth animation, like in the example that demonstrated

https://codepen.io/anthonysimone/pen/JmRKzz

Hello! I am trying to make an animation of the stars. I don't know how to make them rotate out of sync. Below is the example I am trying to reproduce

Hello! I found a very good example and want to use it in my project. It uses TweenMax and staggerFromTo. It seems these functions are already deprecated. Please help to adapt this example to the modern syntax. I can't solve this problem for a long time

Hello! I am writing through google translator. Sorry if I'm not making my point clear. I made a menu animation on the timeline. She works well. But if you close the menu immediately after opening, and immediately open it again (press 3 times quickly on the menu button), the animation is displayed very poorly. Please tell me what am I doing wrong

https://codepen.io/romanusss/pen/wvPYpyw I made an example. All markers move and never collide. If you remove the 2 lines in the Parallax block that I wrote about above, everything works, except for the Parallax effect.

Hello! I write through GOOGLE translator. I'm sorry for the mistakes The animation worked perfectly until I added: overflow-x:hidden; overflow-y: auto; to any block. When I add this, a strange problem appears. ALL markers start to move up and down after the scroll. Also the animation doesn't work until I manually resize the screen. First, I scroll until the animation fires, it does not work, I stretch or shrink the screen, and it works. This problem appears on ALL animations after adding these two lines to ANY block. If I remove overflow the problem completely disappears. help me please