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
islemmaboud.com/join-newsletter
⭐ 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!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
💻 React SVG Animation Repo
github.com/ipenywis/react-svg...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
👉 Personal Links:
✨ My Portfolio islemmaboud.com
🐦 Follow me on Twitter: / ipenywis
💻 GitHub Profile github.com/ipenywis
Made with ❤️ by Coderone

[@tamerahmed9860]

Great efforts! Thank you

[@tangflx]

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

[@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

[@Diego_Cabrera]

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

[@laptopuser5198]

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

[@user-ie4tt1xp7j]

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

[@shahbazahmadsiddiqui]

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

[@alem182]

Buenisimo, gracias!!

[@aymenbachiri-yh2hd]

Thank you

[@nano_org]

Nice video, thanks

[@thyaghito]

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

[@ashik_dev]

Nice video...

[@loupa6128]

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.

[@user-ie4tt1xp7j]

You can animate something by using a deconstructed object with animation parameters and modify that object on demand in hook, I believe.

[@Schmexy]

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

[@Smeali]

5:59 SVG Preview

[@athuljonnie]

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

[@user-ie4tt1xp7j]

You can do background: url(%svg%) in CSS, if I understood your question right.

[@grubbsgaben4461]

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