No video

The Right Way to Animate SVG in React

  Рет қаралды 22,222

CoderOne

CoderOne

Күн бұрын

Пікірлер: 19
@tangflx
@tangflx 6 ай бұрын
oh my this video saved my life. i was using chatgpt to animate each polygon. it was nightmare. didnt know framer motion exits!
@Cypekeh
@Cypekeh 10 ай бұрын
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
@Diego_Cabrera 10 ай бұрын
Nice explanation. I used framer motion in many of my projects as well. Keep it up!
@laptopuser5198
@laptopuser5198 8 ай бұрын
Great video, the best part is mapping the the power field.
@user-ie4tt1xp7j
@user-ie4tt1xp7j 4 ай бұрын
Thanks! You are very straightforward and clear, unlike Framer Motion documentation.
@thyaghito
@thyaghito 7 ай бұрын
Always wanted to do this simple animations without use lottie! thank you!
@shahbazahmadsiddiqui
@shahbazahmadsiddiqui 10 ай бұрын
Great explanation video... I use Framer Motion to animate SVGs too...
@tamerahmed9860
@tamerahmed9860 3 ай бұрын
Great efforts! Thank you
@nano_org
@nano_org 4 ай бұрын
Nice video, thanks
@aymenbachiri-yh2hd
@aymenbachiri-yh2hd 3 ай бұрын
Thank you
@alem182
@alem182 9 ай бұрын
Buenisimo, gracias!!
@Schmexy
@Schmexy 7 ай бұрын
Awesome video! What do you use to preview SVG in VSCode?
@Smeali
@Smeali 7 ай бұрын
5:59 SVG Preview
@loupa6128
@loupa6128 5 ай бұрын
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 4 ай бұрын
You can animate something by using a deconstructed object with animation parameters and modify that object on demand in hook, I believe.
@ashik_dev
@ashik_dev 10 ай бұрын
Nice video...
@athuljonnie
@athuljonnie 7 ай бұрын
Hey, is it possible to make this component as a background for a div? edit: typo
@user-ie4tt1xp7j
@user-ie4tt1xp7j 4 ай бұрын
You can do background: url(%svg%) in CSS, if I understood your question right.
@grubbsgaben4461
@grubbsgaben4461 4 ай бұрын
Typical programmer guide: cut out the part where he actually writes the stuff, that we came to see how to do.
This is the Only Right Way to Write React clean-code - SOLID
18:23
Framer Motion (React) - The Basics
17:07
rithmic
Рет қаралды 27 М.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Бискас
Рет қаралды 6 МЛН
Dad Makes Daughter Clean Up Spilled Chips #shorts
00:16
Fabiosa Stories
Рет қаралды 1,9 МЛН
This Dumbbell Is Impossible To Lift!
01:00
Stokes Twins
Рет қаралды 32 МЛН
拉了好大一坨#斗罗大陆#唐三小舞#小丑
00:11
超凡蜘蛛
Рет қаралды 9 МЛН
How To Load Images Like A Pro
15:48
Web Dev Simplified
Рет қаралды 369 М.
Эффектные анимации с SVG, SMIL и CSS: Пошаговое руководство
17:53
My Top 5 Techniques for Web Animation
9:58
Olivier Larose
Рет қаралды 77 М.
Staggered Text Animations with React and Framer Motion
11:59
Tom Is Loading
Рет қаралды 17 М.
5 Advanced Framer Motion Techniques I Shouldn't Have Skipped
7:35
Tom Is Loading
Рет қаралды 10 М.
How to Animate SVG Strokes
14:11
Coding in Public
Рет қаралды 12 М.
Framer Motion (for React) #15 - Animating SVG's
6:10
Net Ninja
Рет қаралды 83 М.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Бискас
Рет қаралды 6 МЛН