React + GreenSock Integration

#react #gsap #greensock

React + Greensock

I will explain you how to integrate GSAP animations to React application.

demo: GSAP

Using create-react-app create your react application setup.

Now the react application setup is done, we have to add green sock for animation.

	create-react-app react-gsap
	yarn add gsap

view raw create-react-app hosted with ❤ by GitHub

Now you can see the react icon spinning with the help of css animation. We have to convert it to GSAP.

Change App.css. We are removing all the animations.

	.App {
	text-align: center;
	}

	.App-logo {
	height: 40vmin;
	}

	.App-header {
	background-color: #282c34;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: calc(10px + 2vmin);
	color: white;
	}

	.App-link {
	color: #61dafb;
	}

view raw react-gsap-app.css hosted with ❤ by GitHub

Its time to add GSAP animation ...

To add animation to an element using GSAP we need a reference for the element in react. I'm going to use useRef() hook.

Now I will show how to get reference to the element using callback ref

	import React, {useEffect, useRef} from 'react';
	import logo from './logo.svg';
	import './App.css';

	const App = () => {
	let logoElement = useRef(null);



	useEffect(() => {
	console.log(logoElement);
	}, []);

	return (
	<div className="App">
	<header className="App-header">
	<img src={logo}
	onMouseEnter={scaleUp}
	onMouseLeave={scaleDown}
	ref={element => {logoElement = element}}
	className="App-logo"
	alt="logo"
	/>
	<p>
	React + GSAP animation
	</p>
	</header>
	</div>
	);
	}


	export default App;

view raw react-gsap-app-initial.js hosted with ❤ by GitHub

You can see the element in the console.

TweenMax

TweenMax in a animation util from greensock. To learn more about TweenMax visit tweenmax.

Inorder to rotate the div we have to use

   TweenMax.to(
            logoElement,                  // reference to the element 
            1,                            // duration 
            {
                repeat: -1,               // infinite loop of animation
                rotation: 360,            // 360deg rotation
                ease: Linear.easeNone     // linear speed no acceleration -------
            }
        )

Now we can add the animation when the component mounts.
Here is the final version

	import React, {useEffect, useRef} from 'react';
	import {TweenMax, Linear} from 'gsap';
	import logo from './logo.svg';
	import './App.css';

	const App = () => {
	let logoElement = useRef(null);



	useEffect(() => {
	TweenMax.to(
	logoElement,
	1,
	{
	repeat: -1,
	rotation: 360,
	ease: Linear.easeNone
	}
	)
	}, []);

	function scaleUp() {
	TweenMax.to(logoElement, 1, {
	scale: 1.25,
	ease: Linear.ease
	});
	}

	function scaleDown() {
	TweenMax.to(logoElement, 1, {
	scale: 0.75
	});
	}

	return (
	<div className="App">
	<header className="App-header">
	<img src={logo} onMouseEnter={scaleUp} onMouseLeave={scaleDown} ref={element => {logoElement = element}} className="App-logo" alt="logo"/>
	<p>
	React + GSAP animation
	</p>
	</header>
	</div>
	);
	}


	export default App;