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

Hi, I am currently trying to animate text with scroll trigger + gsap scroll smoother on a Gabtsy(React) website. My problem, is that on the first render, the animation doesn't work properly, it just goes from 0 to 1 opacity without transition, but if i just had a simple console.log in my code, i got a second render, and then everything is fine. Here an extract of code and a link to my github repo. I am sorry it's hard for me to build a minimal code demo for this proiblem. Thank you all, have a great day. https://drive.google.com/file/d/1FG_d6FBdlIiNnWln9YPY__sCExuO1m51/view useEffect(() => { const splitIntroPresentation = new SplitText(refIntroPresentation.current, { type: `lines`, }); new SplitText(refIntroPresentation.current, { type: `lines`, }); gsap.from(splitIntroPresentation.lines, { scrollTrigger: { trigger: "#wrapper-svg", start: ' center center', markers: true, }, duration: 2, y: 200, ease: "power4.out", delay: 0, skewY: 10, stagger: { amount: 0.4, }, }); console.log('test') }, []) Complete file here : https://github.com/ptrkvsky/drawme-web/blob/main/src/features/home/components/SectionPresentation/index.tsx

Thank you with this very detailed answer ! I will go with this option. Have a good sunday

Hi, Thank you for your answer. Just to be sure to clearly understand you. I can go in a file and do something like this contextTimeline.addlabel("one-animation").to(.....) and in another one contextTimeline.from("#anId", {opacity: 0}, "one-animation-=2") And another thing i was asking to myself, do i have to update this context timeline with something like this, everytime i add another part of the animation (samet thing if i use redux) setContextTimeline(contextTimeline) Last night i went crazy and i splited my timelines, one masterlayout timeline, onemaster tl for index etc.... Here is an exemple for my layout's animations https://github.com/ptrkvsky/blog-v2/tree/master/src/animation/layout and here where i build it. https://github.com/ptrkvsky/blog-v2/blob/master/src/components/Layout.jsx Does it seems a good way to do it too ? But i will consider using redux for this, i use the old version at work (3.0) it will be a good way to test those new features. Thank you again. PS : It would be so nice to get some github repos with simple websites with good practices for React/Gatsby/Next/Nuxt

Hi guys, I am currently rebuilding my website and i am asking myself what is the bestway to share one timeline through multiple components ? let's say i have this architecture --Layout ----Header ----Component1 --------Component2 --------Component3 ----Footer And i want part of my header timeline starting after the one executed in component3 ? Currently i am using context but it feels a bit strange to me Provider.js const [globalTimeline, setGlobalTimeline] = useState( gsap.timeline({ paused: true }) ) // Global Timeline for animation <myContext.Provider value={{ globalTimeline, setGlobalTimeline: tl => setGlobalTimeline(tl), }} > {children} </myContext.Provider> Layout.js useEffect(() => { globalTimeline.addLabel('start'') globalTimeline.play() }, []) I call my context in every component and add my animation to the globalTimeline. Thank you

ok thank you ^^ good bye to those 3hours then For the moment my bank account display -850€ But when i will be back on tracks, i will definitely consider this option

Just tried for 2hours to morph svg, and just discovered, it's part of the Gsap CLUB, just to be sure, do i have to pay to use the morphsvg ? Thnak you.

Oh perfect thank you, i didnt found it in my research, thank you for all the good work.

Hey guys, I am looking to achieve this effect, but it is using anime.js https://tympanus.net/Development/MorphingPageTransition/# I dont want to load to a second a library + i'am in love with GSAP, and i am pretty sure i can achieve this with it. Do you have any tips, leads, to achieve this ? Thank you everyone and have a good day.

Can't wait for this ! Thank you guys And keep us updated on your APP OP, i would love to see the result

Thats perfect, i had missed to call the function, inside another anoter one, thanks again i am really apreciated it . ?