Jump to content
Search Community

Alixsep

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by Alixsep

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

    in GSAP

    Posted

    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

    I just joined the GSAP community and have some questions about using it with react!

    in GSAP

    Posted

    Hi, thank you for the rich reply!
     

    On 4/26/2021 at 9:57 AM, Rodrigo said:

    always using the useRef() hook as the container of the reference

    alright i get you!

     

    On 4/26/2021 at 9:57 AM, Rodrigo said:

    want to store multiple refs in an array

    yes but this is the warning that was written at : (look at the end of the article)

     

    Quote
    • In the second sample I see this code in the ref callback ref={div => this.cards = div}. Why is the index being used instead of just pushing the element in the array?
      The reason for that is that every time a React component is re-rendered, the render method is executed, but the original instance remains unchanged. The array used to create the animation is created in the component's constructor. The GSAP animation (a TimelineLite) is created in the componentDidMount hook. These two elements are created just once in the App's lifecycle, while the render method is executed on every re-render. Therefore if we push the elements to the array on every re-render, even though the Timeline instance won't change, the array will get bigger and bigger every time the component is re-rendered. This could cause a memory issue, especially for large collections.

    i will be happy if you explain what is going on with refs in array and gsap.
     

    On 4/26/2021 at 9:57 AM, Rodrigo said:

    That depends on the app being build.

    Uhh, as i asked ... why is there so many useEffects in that tutorial?????? none of them has a dependency for useEffect :( 
     

    On 4/26/2021 at 9:57 AM, Rodrigo said:

    If you need to control the animation of a child component in a parent one, use forwarding refs

    Thanks so much. got you!

     

    On 4/26/2021 at 9:57 AM, Rodrigo said:

    Finally I've used transition group in production, in many projects without any issues and I've seen in it used in plenty of projects that are highly praised and without bugs or glitches as you mention

    Last time i checked it was last year. i guess i have to re-try it and give it another chance!

     

    On 4/26/2021 at 9:57 AM, Rodrigo said:

    There is actually no hard evidence that functional components are better than class based components. You could argue that the code is better organized or something like that, but I've seen apps that are a mess in both approaches.

    although you are correct but i am so tired of seeing "this" keyword everywhere. also using functions will hugely decrease the mess in source code. its way cleaner...

    ANYWAYS
    Thanks so much again for the detailed reply. holy s*** you typed all that for me ❤️ 

    I just joined the GSAP community and have some questions about using it with react!

    in GSAP

    Posted

    2 hours ago, GreenSock said:

    Welcome to the forums, @Alixsep! Very happy to hear that you're enjoying GSAP 🎉

     

    I'm not a React guy, so I can't really address your question with any kind of authority. Perhaps @Rodrigo or @OSUblake may have some insight. 

     

    I do know that a lot of people use GSAP in React, so it's very doable. 

     

    That article you linked to - I have no idea why they'd use a bunch of useEffect() calls instead of one. Seems like it's overcomplicating things. I'd do just one, but again, I'm not a React guy so maybe there's a good reason they did it that way. 

     

    Where in the docs do you see a recommendation to use react-transition-group? As far as I know, the docs don't have any React-specific code but I may be forgetting something. 

    Hey there! thanks so much for the greeting 🥳💖

    you tagged rodrigo and osublake, should I direct message them or will they see this topic and reply?

     

    and ye, this is the part where GSAP recommends the react-transition-group library: 

    (Scroll through it)

     

    I should mention that the codes is that link above ... are extremely outdated! As react docs suggest, we should use functional components against the class based components, but the GSAP docs used class based react code all the way up.

     

     

    I just joined the GSAP community and have some questions about using it with react!

    in GSAP

    Posted

    Hello!
    I am a react dev, and always wanted those flashy animations I often see on various places on internet!

    I joined the GSAP community because I found that this is the best animating lib, on the market hands down.

     

    although there are few stuff that are not clear to me:

    A ) GSAP uses actual DOM for animating while react uses virtual DOM. so the docs suggest to use Ref's but there is no detailed and up-to-date tutorial on how to do it the clean way.
    this is the best article I could find: (which is Greensock's promoted link)

    https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react
    - Why is there many useEffects in that tutorial? and not one?
    - What will happen if an element gets re-rendered? will the animation break? will it restart? will it go with no-problem but looses the efficiency? What if an state change? I have no clue...
    - What if I have nested components? should I put each tween in each component's own useEffect? or should I put all of them in the parent and single useEffect? Should I register the plugins in each component or in parent only?

    - What is the issue with the useLayoutEffect? Can't I use it? no tutorial used it. (I have some components that if I use useEffect I will end up seeing super short flashy glitches, so I use useLayoutEffect)


    B ) For mounting/unmounting, can't I just use the GSAP? Why the hell does the docs suggest react-transition-group ??? I hate that library, always full of bugs and glitches and inconsistencies.

     

    These are the question I have for now! I will be really thankful for the people who reply,
    Love y'all,
    Alixsep

×
×
  • Create New...