Jump to content

OSUblake last won the day on June 4

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Blog Post Comments posted by OSUblake

  1. Hi @ConnorS


    I think the bold part was meant to describe the behavior of useEffect, but I can see how that is confusing. I just changed it to this. Is that better?



    In order to avoid the flash, we can replace useEffect with useLayoutEffect. useLayoutEffect functions exactly the same as useEffect, but runs before the DOM has been painted.


  2. Hi @nickraps


    You can create a timeline with useState, but it would be better to use a function to initialize it.

    // will only create 1 timeline
    const [tl, setTl] = useState(() => gsap.timeline());
    // creates a new timeline on every render and throws it away
    // except for the one created on the first render
    const [tl, setTl] = useState(gsap.timeline());


    Another reason to use useRef with an effect is that you will need to wait for it render when using ScrollTrigger.


    const [tl, setTl] = useState(() => gsap.timeline({
      scrollTrigger: {
        trigger: ref.current // undefined


  3. That warning is from eslint and won't cause any problems. If you don't want to see the warning, add the eslint-disable-next-line comment above the array, or declare q inside your use effect.


    useEffect(() => {
    	const q = gsap.utils.selector(...);
    }, []);


    Also, using logo1 as the selector context isn't going to work as it has no children. You should use a ref on the root element in your component. Please look at the examples provide above.


  4. Hi @MikeGajdos


    Here's a more in depth article on creating reusable animation components...

    Creating Reusable Animation Components with React and GSAP | by Nathan Sebhastian | Bits and Pieces (bitsrc.io)


    The part about fragment is for advanced usage, and I wouldn't worry about that if you're new to React. The fragment is only needed if you don't want your animation component to create a wrapper element. Instead you would wrap the children with a fragment, like this...


    return (


    But it's gets more complicated than that because you need to get a ref the children. Here are some demos that didn't make the final cut of the article, but show how to get refs for children inside a fragment. 


    Using a custom ref function...




    This demo also uses a custom ref function, but the bounds are passed in via a ref.




    Again, if you're new to React, I would focus more on article I linked to. The demos I just posted might better suited someone who plans on making a library for other people to use.


    • Like 1
  5. 11 hours ago, Alixsep said:

    I got a question though, won't using .from method cause initial render glitch or flash? for example the whole dom might be visible before .from method sets some elements to opacity 0


    That's we recommended using useLayoutEffect as it will run before the DOM gets painted to the screen. The only time that won't happen is when using SSR and your app hasn't been hydrated. For that, you might need to do something similar to option 2 here.



    11 hours ago, Alixsep said:

    also May you please add examples of transition between routes? For example when I go from homepage to about page, how to animate that?


    Yeah, we'll work on a demo for that, although it's a little more complicated because it involves keeping track of elements using state and React's Children API.


    • Like 1
  6. 34 minutes ago, React said:

    I think the last section of `useIsomorphicLayoutEffect` only avoids the warning but does not actually fix the problem


    Thanks for the input, @React. You're absolutely correct. For fading in, it would probably be better to just have the opacity set to 0 ahead of time. But we needed a demo, and it's easy to demonstrate fading in. Other uses for useLayoutEffect, like when pinning ScrollTriggers aren't as easy to demonstrate in a simple CodePen.


    Do you think it be better if we just removed that part from the guide?

    • Like 2