Hiding a component before the animation starts

[DavTho]

I need to stop the flicker that happens on loading a React component with an SVG inside, so that the SVG appears offscreen at the start. I'm using React Hooks and a simple setTimeOut inside a useEffect hook to control a display property does not seem to work. 

 

This animation code works, but produces a flicker:

 

  const mortarBoard = useRef(null);

 

  useEffect(() => {

  

    const tl = new TimelineMax();

    tl.fromTo("#mortarboard", 5, { y: 1200 }, { y: 0 });

    

  }, []);

 

whereas this code the flicker is not noticeable:

 

  const mortarBoard = useRef(null);

 

  useEffect(() => {

    TweenMax.fromTo(

      [mortarBoard.current],

      0.5,

      { x: 5, y: 18 },

      { x: -5, y: -40, yoyo: true, repeat: 3 }

    );

 

    

  }, []);

 

 

How do I hide the component before the animation starts?

 

 

[ZachSaucier]

Hey DavTho and welcome to the GreenSock forums!

 

We actually have a Quick Tip that was made just for this sort of thing. It's not React-based, but the core issue and solution is the same:

 

Essentially, you set the styles in your CSS to hide the element and then un-hide it once the page has loaded via JS.

 

Let us know if you have any other questions!

[ZachSaucier]

Side note: We highly recommend GSAP 3! It has a simplified API and a bunch of new features. You may be loading it already. I just noticed that you're using the old API form (which still works in most cases).

[DavTho]

That's awesome! Thanks for helping me out so quickly!