OSUblake

Hi @konstantinschuette

I'm not seeing that. Maybe you have an extension that is messing with it. Have you tried it in incognito mode?

Hi @Decode

I'm not too familiar with React's types, but this seems like it might work.

function useArrayRef(): [MutableRefObject<any[]>, (ref: any) => void] {
  const refs = useRef<any[]>([]);
  refs.current = [];
  return [refs, (ref: any) => ref && refs.current.push(ref)];
}

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?

Quote

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.

@nickraps

I probably misunderstood your question, but the issue is still that React will create a new timeline on every single render if you don't use a hook.

This shows why you should never create a timeline outside of a hook. The timeline in the reversed effect is referencing a completely different timeline.

Storing a timeline in a ref. (codepen.io)

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
  }
}));

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.

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 (
  <>{children}</>  
);

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

https://codepen.io/GreenSock/pen/XWRqrjY

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

https://codepen.io/GreenSock/pen/qBmYEjx

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.

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.

https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

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.

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?