Struggling with implementing gsap in react.js (WARNING: HUGE GLITCHES)

[Alixsep]

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

[OSUblake]

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: {
  	...
  }
})

 

[Alixsep]

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)?

[OSUblake]

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.

 

[Alixsep]

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 🙏🙏

[OSUblake]

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

 

[Tagliavia]

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.