Alixsep Posted September 3, 2021 Share Posted September 3, 2021 Hi! Thanks for the amazing opportunity of members being able to ask their questions through gsap forum! It was easy for me to learn gsap using vanilla syntax (script tag in html), but using react is tricky for me. There is a CodePen and I want to implement in react.js just for practicing. This is the codepen link of my attempt: https://codesandbox.io/s/wild-architecture-ml7hh?file=/src/App.js I don't have a clue what exactly I did wrong but the glitches and the jumps are so annoying and everything is all over the place!!! Also i don't know if the original codepen author's code is correct, as far as I know I shouldn't use timeline with scrollTrigger as the gsap docs suggest. Any help in 1. Why are those glitches happening and 2. How to write the code more clean and efficient will be appreciated! Regards, 💖 Alixsep See the Pen PoZKRLd by Sicontis (@Sicontis) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 3, 2021 Share Posted September 3, 2021 Hi Alixsep! Looks like you might have read our React Guide 😉 9 minutes ago, Alixsep said: as far as I know I shouldn't use timeline with scrollTrigger as the gsap docs suggest. Where did you see this? There is a common mistakes page, and one of them is not to nest scroll triggers in a timeline, which is what the original pen is doing. A timeline with a scroll trigger is fine. gsap.timeline({ scrollTrigger: { ... } }) Link to comment Share on other sites More sharing options...
Alixsep Posted September 3, 2021 Author Share Posted September 3, 2021 20 minutes ago, OSUblake said: which is what the original pen is doing. Thanks! how can I fix the react version code in the codesandbox link? I don't know where to start honestly 😶, also why are glitches happening is my react version and not happening in the codepen (non-react)? Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 3, 2021 Solution Share Posted September 3, 2021 I see the same glitches in both versions. You need to refactor out all the nested scroll triggers. A timeline should only have a single scroll trigger. .to("#liberty", { // scrollTrigger: { // start: 2600, // end: 2800, // scrub: 1 // }, x: 400, duration: 2, ease: "sine.out" }) .to(".specs", { // scrollTrigger: { // start: 2600, // end: 2800, // scrub: 1 // }, opacity: 1, duration: 2, ease: "sine.out" }) .from(".specs h2", { duration: 1, opacity: 0, x: -30, // scrollTrigger: { // start: 2600, // end: 2800, // scrub: 1 // } }) Since you're learning, it might be better to find another pen that doesn't have so many issues. 1 Link to comment Share on other sites More sharing options...
Alixsep Posted September 3, 2021 Author Share Posted September 3, 2021 3 minutes ago, OSUblake said: You need to refactor out all the nested scroll triggers. A timeline should only have a single scroll trigger. Alright i will work on this :3 6 minutes ago, OSUblake said: pen that doesn't have so many issues oh alright, do you know any well-written simmilar pens so i learn from them? thanks blake 🙏🙏 Link to comment Share on other sites More sharing options...
OSUblake Posted September 3, 2021 Share Posted September 3, 2021 I'm not sure about one similar to that as there are so many demos. Have you checked out the listing here? https://greensock.com/st-demos/ And our collection on CodePen? https://codepen.io/collection/DkvGzg Link to comment Share on other sites More sharing options...
Tagliavia Posted September 3, 2021 Share Posted September 3, 2021 My experience so far, make use of the useSelector Hook as much as possible. One ScrollTrigger per item to be animated or timeline. (best way to avoid glitches or bugs) If using i18next preload all of your Namespaced translation files or you might suffer very bad glitches during the loading of translations outside of suspense. Have a good one. 2 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