The Right Way to Animate SVG in React

Adding SVGs to your React application and animating them is a crucial point of making your landing pages stand out and creating smooth-looking websites. In this video, we'll see how to create, export, optimize, import and animate your SVGs from Figma or any other vector software inside your React apps like a senior developer.

🎉Our Newsletter is live! Join thousands of other developers

⭐ Timestamps ⭐
00:00 Intro
00:34 Brief intro into SVG
01:34 Optimizing & Exporting SVG in Figma
06:03 Converting SVG into a React Component
10:05 Animation

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

💻 React SVG Animation Repo

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

👉 Personal Links:

Made with ❤️ by Coderone

[Diego_Cabrera]

Nice explanation. I used framer motion in many of my projects as well. Keep it up!

[laptopuser]

Great video, the best part is mapping the the power field.

[iettxpj]

Thanks! You are very straightforward and clear, unlike Framer Motion documentation.

[tangflx]

oh my this video saved my life. i was using chatgpt to animate each polygon. it was nightmare. didnt know framer motion exits!

[shahbazahmadsiddiqui]

Great explanation video... I use Framer Motion to animate SVGs too...

[thyaghito]

Always wanted to do this simple animations without use lottie! thank you!

[Cypekeh]

SVGs being from 2001 is old? I thought they were from the early 90s or 80s like most things in CS :D (HTML, Python, vim, Haskell)
As for the animations however, amazing explanation. I did use framer motion in a project recently, but I didn't thought of applying it to SVGs. It looks sick

[loupa]

Nice video. Is there a way to animate SVG or change current animation using something like onClick/onTap in framer-motion? I can't find anything.

[Schmexy]

Awesome video! What do you use to preview SVG in VSCode?

[athuljonnie]

Hey, is it possible to make this component as a background for a div?

edit: typo

[grubbsgaben]

Typical programmer guide: cut out the part where he actually writes the stuff, that we came to see how to do.