Jump to content
GreenSock

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

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

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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

  • Solution

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.

 

  • Like 1
Link to comment
Share on other sites

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

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×