Kovsky Posted May 21, 2022 Share Posted May 21, 2022 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 Link to comment Share on other sites More sharing options...
PointC Posted May 21, 2022 Share Posted May 21, 2022 I don't know anything about React, but it seems there has been an issue (especially with from tweens) with React 18 and strict mode. Maybe this thread can help. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 21, 2022 Share Posted May 21, 2022 Yes indeed - anytime I see a .from() tween in a React useEffect(), I immediately think about the React 18 weird behavior where it calls it TWICE (in strict mode which is the default). Totally unrelated to GSAP. See the explanation here: Link to comment Share on other sites More sharing options...
Kovsky Posted May 21, 2022 Author Share Posted May 21, 2022 Thank you for the assistance, but i am on version 17.0.2 not 18 Link to comment Share on other sites More sharing options...
GreenSock Posted May 21, 2022 Share Posted May 21, 2022 I don't see anything in your code that would control opacity. And unfortunately we can't really troubleshoot without a minimal demo that clearly shows the issue. It sure sounds like something with your local build tool(s). If you still need some assistance, please provide a minimal demo - you can use CodeSandbox if that's easier. Here's a starter template with Gatsby: https://codesandbox.io/s/gsap-gatsby-starter-8nf8r Link to comment Share on other sites More sharing options...
Kovsky Posted May 22, 2022 Author Share Posted May 22, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted May 22, 2022 Share Posted May 22, 2022 Hey there! Sorry about that confusion, the GSAP package in that template is just the public plugins. For members only plugins you'll need to use our GSAP-trial package instead. Check back if you have any issueshttps://www.npmjs.com/package/gsap-trial 1 Link to comment Share on other sites More sharing options...
Kovsky Posted May 22, 2022 Author Share Posted May 22, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted May 23, 2022 Share Posted May 23, 2022 I'm not at all familiar with Gatsby or React, but don't you have to put your code inside of a useEffect()? Otherwise, won't it execute every time that component renders? That would certainly explain the multiple triggers, and if you're doing .from() animations it would look like they don't work when you execute them multiple times. The first .from() would jump the values to the end and start animating back to the CURRENT one...and the next .from() that's called right away would again render immediately and start animating back to the CURRENT value which at that point is identical to the end value (thus no movement). It's a logic issue unrelated to GSAP. Your demo had a bunch of errors and warnings in the console too. Link to comment Share on other sites More sharing options...
Cassie Posted May 23, 2022 Share Posted May 23, 2022 This should help get you going. Link to comment Share on other sites More sharing options...
Kovsky Posted May 23, 2022 Author Share Posted May 23, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 23, 2022 Share Posted May 23, 2022 Hahaha, you've had two out of 6. Minimal demo request and a React article link. This is never a nice bit of news to deliver - But I'm not sure how we can help if it's working in the demo but not in your project. This is where the game of 'spot the differences' starts. You're going to have to step through your project code and your demo code and work out what the difference between them is. This community may be able to help more with the React side of things? Lunch dev discord community Link to comment Share on other sites More sharing options...
Kovsky Posted May 23, 2022 Author Share Posted May 23, 2022 Yes thank you i'll start the game and thank you for the discord. I'll keep you updated Link to comment Share on other sites More sharing options...
Kovsky Posted May 31, 2022 Author Share Posted May 31, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Unless you can provide an example for us to look at we can't really advise I'm afraid. It's impossible to debug from a video alone. Sorry Link to comment Share on other sites More sharing options...
Kovsky Posted May 31, 2022 Author Share Posted May 31, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Sorry, we just don't have the resources to look through live sites or github repos. Minimal demos are far more helpful Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 As I said in that tweet you linked to! If you give me a clear, simplified minimal demo with a concise description of your issue - you have my heart forever and you will make my whole damn day — Cassie Evans (@cassiecodes) May 19, 2022 Link to comment Share on other sites More sharing options...
Kovsky Posted June 1, 2022 Author Share Posted June 1, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2022 Share Posted June 1, 2022 Thanks for this - I can't seem to make any changes to this file at all though. I've tried doing a console log and adding markers but nothing is happening? https://codesandbox.io/s/cocky-sid-36rt93?file=/src/features/home/components/SectionPresentation/index.tsx Link to comment Share on other sites More sharing options...
Kovsky Posted June 1, 2022 Author Share Posted June 1, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2022 Share Posted June 1, 2022 I managed to load it! But I'm not sure what the issue is I'm afraid. It looks like a scrollSmoother/scrollTrigger thing but theres just far too many files in here for me to easily run through it Maybe someone else will be able to figure it out, but you're far more likely to get help if you strip it way way way back. Currently I'm having to sit and wait for the build in between changes which is taking quite a while.https://codesandbox.io/s/cocky-sid-36rt93?file=/src/features/home/components/SectionPresentation/index.tsx Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2022 Share Posted June 1, 2022 That's a little step in the right direction though maybe - I'd suggest stripping it right down to the bare bones then adding scrollSmoother and then we can try and see what's going on without all the rest of the periphery stuff. Link to comment Share on other sites More sharing options...
Kovsky Posted June 1, 2022 Author Share Posted June 1, 2022 Ok i'll do more cleanings into those files, thank you for watching 1 Link to comment Share on other sites More sharing options...
Kovsky Posted June 1, 2022 Author Share Posted June 1, 2022 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now