In this tutorial, we will explore how to create stunning text animations using Framer Motion.
Framer Motion is a powerful animation library for React, providing a simple yet flexible API to create smooth animations. By the end of this tutorial, you will have a text animation similar to the Daredevil example shown Above.
To follow along with this tutorial, you should have a basic understanding of React(Next.js). Familiarity with Framer Motion is a plus but not required.
First, let's set up a new React project using Next.js for fast development.
1npx create-next-app@latest text-animation
2cd text-animation
3npm install framer-motionCreate a new file named page.js for our main component.
1'use client'
2import React from 'react'
3
4const page = () => {
5 const letters = Array.from("Daredevil")
6
7 return (
8 <div className=' h-screen mx-auto flex flex-col justify-center items-center'>
9 <div
10 className={`px-2 absolute uppercase overflow-hidden font-bold tracking-tighter flex text-[calc(15vw)] md:text-[calc(13vw)] lg:text-[calc(11vw)]`}>
11 {letters.map((letter, index) => (
12 <span
13 key={index}
14 className='text-[#1E1818] '>
15 {letter === " " ? "\u00A0" : letter}
16 </span>
17 ))}
18 </div>
19 <div
20 className={`px-2 absolute uppercase overflow-hidden font-bold tracking-tighter flex text-[calc(15vw)] md:text-[calc(13vw)] lg:text-[calc(11vw)]`}>
21 {letters.map((letter, index) => (
22 <span
23 style={{
24 WebkitTextStroke: '1px #1E1818',
25 }}
26 key={index}
27 className='text-transparent'>
28 {letter === " " ? "\u00A0" : letter}
29 </span>
30 ))}
31 </div>
32 </div>
33 )
34}
35
36export default pagediv contains each letter wrapped in a span with a solid color.div contains each letter wrapped in a span with a text stroke for the outline effect.Add background-color in index.css
1body {
2 background-color: #E8E5E5;
3}To see the result, start your React project:
1npm run devYou should see the text and if you inspect you'll see each individual characters of text
1'use client';
2import React from 'react';
3import { motion } from 'framer-motion';1const container ={}
2const child={}
3return (
4 <div className=' h-screen mx-auto flex flex-col justify-center items-center'>
5 <motion.div
6 variants={container}
7 initial="hidden"
8 animate="visible"
9 className={`px-2 absolute uppercase overflow-hidden font-bold tracking-tighter flex text-[calc(15vw)] md:text-[calc(13vw)] lg:text-[calc(11vw)]`}>
10 {letters.map((letter, index) => (
11 <motion.span
12 key={index}
13 variants={child}
14 className='text-[#1E1818] '>
15 {letter === " " ? "\u00A0" : letter}
16 </motion.span>
17 ))}
18 </motion.div>
19 <motion.div
20 className={`px-2 absolute uppercase overflow-hidden font-bold tracking-tighter flex text-[calc(15vw)] md:text-[calc(13vw)] lg:text-[calc(11vw)]`}>
21 {letters.map((letter, index) => (
22 <motion.span
23 style={{
24 WebkitTextStroke: '1px #1E1818',
25 }}
26 key={index}
27 className='text-transparent'>
28 {letter === " " ? "\u00A0" : letter}
29 </motion.span>
30 ))}
31 </motion.div>
32 </div>
33 )div and span elements to enable animations.motion.div). This defines the initial and visible states of the container, managing the overall animation and the stagger effect for child animations.motion.span). This defines how each letter will animate from the hidden state to the visible state.hidden. The elements will start with the properties defined in the hidden state of their respective variants.visible state, using the properties defined in the visible state of their respective variants.1const page = () => {
2 const letters = Array.from("Daredevil")
3
4 const container = {
5 hidden: { opacity: 0 },
6 visible: {
7 opacity: 1,
8 transition: { staggerChildren: 0.2 }
9 }
10 }
11
12 const child = {
13 hidden: {
14 opacity: 0,
15 x: 0,
16 y: 100,
17 rotateZ: 45,
18 transition: {
19 type: "spring",
20 },
21 },
22 visible: {
23 opacity: 1,
24 x: 0,
25 y: 0,
26 rotateZ: 0,
27 transition: {
28 type: "spring",
29
30 },
31 }
32 }
33 return (To see the result, start your React project:
1npm run devYou should now see the text "Daredevil" animating smoothly on the screen.
In this tutorial, we've seen how to create a dynamic text animation using Framer Motion and React. Framer Motion offers a powerful and flexible way to create animations, making your React applications more engaging and visually appealing. Feel free to experiment further and create your own unique animations!