Kovsky

Ok got it, thank you, sorry for the late answer i was on holiday.

Hi everyoby, I am building this website (and got some trouble to fix the header) but that will be for another day i guess. The question is why does GSAP put more than 160 inline style property ? https://drawme-web-git-main-ptrkvsky.vercel.app/ Thank you

thank you for your time. It's ok to get the 502 badgateway you need to choose the tab with the 8000 port but the most important part, it's working with this workaround setTimeout(() => { gsap.to(splitIntroPresentation.lines, { scrollTrigger: { trigger: refIntroPresentation.current, start: " center center", markers: true, id: "test" }, duration: 2, ease: "power4.out", y: 400 }); }, 10); Thank you Cassie, Thank you Jack

Ok last try for me, it's the smallest demo i can provide --> https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx No Redux, no Styled Components, no GraphQl, just 2 classic components and a layout. I hope it is not too much code. Maybe i should stop try to use Gsap with React ? i've tried this 10 times since you first mentionned it few days ago it's done thank you. Thank you for the help.

Ok i did some cleaning into those files and let me clarify the organisation. ./gatsby-browser.js or ./gatsby-ssr.js setup a provider for Redux ./pages/index.tsx display my layout and 2 components ./components/Layout.tsx setup the css and js style container + add Scroll Smoother ./components/GsapScroll.tsx is just a wrapper for ScrollSmoother Finally ./features/home/components/SectionPresentation.tsx where the animation is setup Thats all the files used in this demo. I hope it's clearer. https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx

Ok i'll do more cleanings into those files, thank you for watching

I'm pretty sure i didn't add this console.log, and it appears in console as expected, is it yours ? and i assume this is the marker you are talking about

Hi Cassie, I've finally found that i can import a project into CodeSandBox ? I've made a little bit of cleanup, in my index page and kept only 2 sections (to be able to scroll). The animation that doesnt work propertly is defined in SectionPresentation.tsxcomponent (https://codesandbox.io/s/intelligent-gates-pqu5jc?file=/src/features/home/components/SectionPresentation/index.tsx) I hope this is minimal enough so i can make your whole damn day. ? Let me know if there is anything else i can do. Thanks a lot.

I linked the repo above https://github.com/ptrkvsky/drawme-web/blob/main/src/features/home/components/SectionPresentation/index.tsx and thought this was maybe a known bug, that's why i provided the video

I am still struggling with this, strange thing is if i refresh the page under the mark, the animation triggers and act correctly ; if i am above and then scroll the animation triggers, but with 0 transitions. https://drive.google.com/file/d/1F2zRiXnHPlEuuigvNC5Rn03YGVHd0l-w/view

Yes thank you i'll start the game and thank you for the discord. I'll keep you updated

Thank you Jack, useEffect was indeed missing in the DEMO and everything is working as expected, but my code still doesn't work in my project ^^ Thank you sir Cassie

Thank you Cassie, I tried to build a demo but now my text doesn't split, and i got some bugs on with those markers i think, is normal to get multiple "start/end" i have only one animation in this demo ? https://codesandbox.io/s/clever-wave-l83sls?file=/src/pages/index.js Thanks in advance.

Thank you Jack, I just tried to import ScrollSmoother in your template, but it is not available, how can i use ScrollSmoother in this template ? Thank you

Thank you for the assistance, but i am on version 17.0.2 not 18