Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About Kovsky

Kovsky's Achievements

  1. 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
  2. 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.
  3. 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
  4. Ok i'll do more cleanings into those files, thank you for watching
  5. 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
  6. 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.
  7. 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
  8. 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
  9. Yes thank you i'll start the game and thank you for the discord. I'll keep you updated
  10. 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
  11. 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.
  12. 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
  13. Thank you for the assistance, but i am on version 17.0.2 not 18
  14. 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
  15. Thank you with this very detailed answer ! I will go with this option. Have a good sunday