Search code examples
javascriptreactjsreact-nativegsap

How can I add animation of GASP as background in React app?

For ex: this is a simple animation effect. How can I use it in my React application.

https://codepen.io/celli/pen/xZgpvN


<div id="container" />

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<!-- TweenMax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

Is there any other example or demos to embed animation as background in my React webapp.

P.S. Looking with the latest class based React app.

Solution

  • I see at least two possibilities to achieve that:

    1. When developing a React application, there is still a regular webpage around it. React gets loaded into an element inside the webpage. You could, for example, have the background effect in another div than the React application.

    2. If you want to have use it inside the React app (for example as background of a single component), you could use a <div ref={backgroundAnimationRef} /> and set the effect up in either a useEffect hook or in class based componentDidMount. You might need to add a cleanup function depending on your effect in componentWillUnmount or the return value of useEffect.

    If you need the effect everywhere on the page, I'd go with option 1. If you need more flexibility (have it multiple times on the page / on different sections in your app or its width/height is dependent on some React component), I'd choose option 2.