yurbas

Unfortunately, doesn't help. But anyway thank you. Obviously it's my typescript settings something i missing

Yes it's definitely typescript error. Console.log shows value. The problem occured with vite build tool with default react-typescript template. All my other builds(webpack, create-react-app,vite-react-js, next) works fine

If i remove import {gsap} from 'gsap', function becomes "accessable", but anyway get gsap is not defined in runtime. How it's even possible?

Hello. I can't figure out, in all my old projects gsap.utils imports fine But now i can't import gsap properly. For example fresh created application npm create vite@latest app-name --template react-ts npm i gsap, then i get this: What I miss?

Yes, that what i looked for. Hardcoded start and end positions is decision. fromTo() works perfectly and never broke animation at window resize. That was simplier that i thought. Thank you very much!

I think i explained my problem badly. Let me start from the begining. I keep in mind overlaping problem, and as you can see in codepen example in first post, you can't just scroll fast so you can manage your scrub options. But doesn't matter, let's go back to the original question. What is the best and smooth way to do adaptive animations, which is spread over all components? I post more undestandable example with visualization, which shows, that my animations is not overlaping and independent. Also on video you can see how matchMedia() works in my situation(sorry for quality, only 0,5 mb is allowed). https://stackblitz.com/edit/react-f3xf2n?file=src/App.js screen-recording-anim.mp4

Yes, my general idea is set master timeline with global settings, and few nested scrollTriggers on childs with different properties (in demo its the same, but in real project not). I was expected when matchMedia() runs, it delete all nested things and recreate new animations and scrollTriggers, thank you for clarify that its bad practice. But anyway, i tried also create separate independent scrollTriggers for each section, as in this case https://stackblitz.com/edit/react-f3xf2n?file=src/App.js Same effect, when i drag window, i getting broken animations. Maybe i should avoid to use timelines and try to config this with standalone scrollTrigger instances with onEnter, onLeave callbacks?

Ok i use other template https://stackblitz.com/edit/react-qckz8n?file=src/App.js When you try to change viewport height in different position on page you still get smooth and correct animations, right? Because I'm totaly not, even on @Rodrigo example same issue To make it clear i recorded video, where you can see how my animation is behave. screen-recording (3).mp4

Hi, @Rodrigo, thank you for response. Yes, i tried matchMedia() before, but in my case it seems brake animation. I rewrote code due to your recomendation, but when i change screen size - new animation with new options is initialized, but seems old animation didn't killed properly and still affects new created animation. ?

Hi! I'll be very appreciated if you help me figure out how to reinitialize animation by the best way using React. I have flex containers, so when i change window height, i want my animations get new values, such as 'scrub = 3' on window size more then 600px, or 'scrub = true' otherwise, because on small height 3 seconds scrub will break animation. Also some elements wants to know actual window size for right positioning. You see, purple square want to move directly to the middle of next section, so we set 'y' value as section height, which exactly is window.innerHeight tlFromBot.to('#purpleSquare', {y: window.innerHeight, rotation: 360}, 0) But window.innerHeight is dynamic value, so what the best way for smooth reinitializing values, recreate new animations or maybe somehow change values in existing animations?