Тёмный

The Right Way to Animate SVG in React 

CoderOne
Подписаться 104 тыс.
Просмотров 18 тыс.
50% 1

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

Опубликовано:

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 19   
@Diego_Cabrera
@Diego_Cabrera 8 месяцев назад
Nice explanation. I used framer motion in many of my projects as well. Keep it up!
@laptopuser5198
@laptopuser5198 5 месяцев назад
Great video, the best part is mapping the the power field.
@user-ie4tt1xp7j
@user-ie4tt1xp7j 2 месяца назад
Thanks! You are very straightforward and clear, unlike Framer Motion documentation.
@shahbazahmadsiddiqui
@shahbazahmadsiddiqui 8 месяцев назад
Great explanation video... I use Framer Motion to animate SVGs too...
@tamerahmed9860
@tamerahmed9860 21 день назад
Great efforts! Thank you
@tangflx
@tangflx 4 месяца назад
oh my this video saved my life. i was using chatgpt to animate each polygon. it was nightmare. didnt know framer motion exits!
@alem182
@alem182 6 месяцев назад
Buenisimo, gracias!!
@thyaghito
@thyaghito 5 месяцев назад
Always wanted to do this simple animations without use lottie! thank you!
@Cypekeh
@Cypekeh 7 месяцев назад
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
@nano_org
@nano_org Месяц назад
Nice video, thanks
@aymenbachiri-yh2hd
@aymenbachiri-yh2hd Месяц назад
Thank you
@ashik_dev
@ashik_dev 7 месяцев назад
Nice video...
@Schmexy
@Schmexy 5 месяцев назад
Awesome video! What do you use to preview SVG in VSCode?
@Smeali
@Smeali 5 месяцев назад
5:59 SVG Preview
@loupa6128
@loupa6128 2 месяца назад
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
@user-ie4tt1xp7j 2 месяца назад
You can animate something by using a deconstructed object with animation parameters and modify that object on demand in hook, I believe.
@athuljonnie
@athuljonnie 4 месяца назад
Hey, is it possible to make this component as a background for a div? edit: typo
@user-ie4tt1xp7j
@user-ie4tt1xp7j 2 месяца назад
You can do background: url(%svg%) in CSS, if I understood your question right.
@grubbsgaben4461
@grubbsgaben4461 2 месяца назад
Typical programmer guide: cut out the part where he actually writes the stuff, that we came to see how to do.
Далее
Animate SVG Character | SVGator
10:38
Просмотров 10 тыс.
OMG🤪 #tiktok #shorts #potapova_blog
00:50
Просмотров 10 млн
Must-have gadget for every toilet! 🤩 #gadget
00:27
Framer Motion (React) - The Basics
17:07
Просмотров 19 тыс.
Interactive web animation with SVG (DevFest 2019)
38:19
SVG, большой гайд
1:36:05
Просмотров 59 тыс.
Don't Use React Context!! Use This instead
13:34
Просмотров 26 тыс.
How To Load Images Like A Pro
15:48
Просмотров 357 тыс.
This React Drag and Drop Component Is Magic
9:56
Просмотров 76 тыс.
I Made a Neural Network with just Redstone!
17:23
Просмотров 591 тыс.
OMG🤪 #tiktok #shorts #potapova_blog
00:50
Просмотров 10 млн