Geek Culture
Published in

Geek Culture

Create Revealing Text Animation with React and GSAP

A guide on how to create text animation with an animation library called GSAP.

Photo by Animesh Chatterjee on Unsplash

I was working on revamping my portfolio website, and I wanted to make the animation feel fresh, so I decided to do some text animation with it. Here I want to share how I create this revealing text with an animation library called GSAP.

1. Initiate the project

At this point, it is up to you whether you want to create it with create-react-app or with some online environment like stackblitz. Now I just started it with stackblitz. After that, in the dependencies section, install GSAP.

Install gsap.

After that, in the file that you want to animate, (or in my case in app.js), import GSAP like this:

import { gsap } from 'gsap';

2. Create the element

Now, let's start with creating the JSX to display our text. First, within the return of the app.js, we create the wrapper. Here we want to create a line of text, therefore we create 2 div within the wrapper.

return(
<div style={style.wrapper}>
<div style={style.words}>
</div>
<div style={style.words}>
</div>
</div>
)

Here’s the style so far.

const style = {
wrapper: {
height: '30vh',
width: '90vw',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
words:{
display: 'flex',
flexDirection: 'row',
overflow: 'hidden'
}
}

Pay attention to the overflow:’hidden’ in words style, that style is the key to making the text look appear suddenly from the bottom. Try to comment on that style after we finish it.

3. Create Letter component

After that, let's create the Letter component so it can be reusable. The component will receive two props, which are space and the letter. It will print a space if space props are true, and will print the letter if space is false. The component will look like this.

const Letter = ({space, letter}) => { return(  space == true ?   <div className="text">&nbsp;</div>   :   <div className="text" style={style.letter}>{letter}</div> )}

There we create conditional rendering between rendering the letter or a space to the screen by destructuring the props that we will give to the component later.

Then we append the style for style.letter. It will look like this. Actually, it is up to your preference.

letter:{ fontSize: 32, color: 'white', fontWeight: 'bold'}

4. Add the text in return

Now let's get to the next part, add the text to the element that we already created in step 2.

<div style={style.words}> {  'Hello World!'.split('').map((i) =>   i == ' ' ?   <Letter space={true} letter={i}/>   :   <Letter space={false} letter={i}/>  )}</div><div style={style.words}>{ 'No Worries'.split('').map((i) =>  i == ' ' ?   <Letter space={true} letter={i}/>   :   <Letter space={false} letter={i}/> )}</div>

There, we directly write the text Hello World, and No Worries, split it into arrays, then map the value one by one. After that there is one more conditional rendering to see if it is a space then we give the space={true} props to letter component, and false if it isn’t.

5. Animate!

Here comes the main part. Now let's add useEffect function to app.js

useEffect(() => { let textAnimation = gsap.timeline(); textAnimation.from('.text', {  y: 100,  stagger: { 
each: 0.07
}
});}, []);

There we declare textAnimation variable, then assign them to gsap.timeline() so we can access them easily. GSAP has many methods to use, like .from, .to, .fromTo , etc. But for now, we will just use .from method. It receives two parameters, the target, and the object of the style.

All the style that is contained within the object style in .from method, is the style that the component will apply, before transitioning to the actual style that we already declare in the style object.

Take a look at the Letter component, where we give the div with className text so we can target it with GSAP. So there we target element with text class, and after that create an object that contains the style, there we set the y to 100, which mean the text will come from the bottom as far as 100 pixels, and stagger is to give it a delay between the element that is transitioning. If the stagger is not there, all the text will come all at once.

Now when you run the project, the animation will come after you refresh the browser.

That’s it! That all I can share today with you, see you next time, have a good day!🖐

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tulusibrahim

Tulusibrahim

Frontend engineer, usually post some thought once in a while.