The Right Way to Animate SVG in React

  Рет қаралды 27,790

CoderOne

CoderOne

Күн бұрын

Пікірлер
@ЦзинКэ-ы5х
@ЦзинКэ-ы5х 9 ай бұрын
Thanks! You are very straightforward and clear, unlike Framer Motion documentation.
@laptopuser5198
@laptopuser5198 Жыл бұрын
Great video, the best part is mapping the the power field.
@Diego_Cabrera
@Diego_Cabrera Жыл бұрын
Nice explanation. I used framer motion in many of my projects as well. Keep it up!
@tangflx
@tangflx 11 ай бұрын
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 Жыл бұрын
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
@shahbazahmadsiddiqui
@shahbazahmadsiddiqui Жыл бұрын
Great explanation video... I use Framer Motion to animate SVGs too...
@thyaghito
@thyaghito 11 ай бұрын
Always wanted to do this simple animations without use lottie! thank you!
@tamerahmed9860
@tamerahmed9860 7 ай бұрын
Great efforts! Thank you
@nano_org
@nano_org 8 ай бұрын
Nice video, thanks
@Schmexy
@Schmexy Жыл бұрын
Awesome video! What do you use to preview SVG in VSCode?
@Smeali
@Smeali Жыл бұрын
5:59 SVG Preview
@alem182
@alem182 Жыл бұрын
Buenisimo, gracias!!
@loupa6128
@loupa6128 9 ай бұрын
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.
@ЦзинКэ-ы5х
@ЦзинКэ-ы5х 9 ай бұрын
You can animate something by using a deconstructed object with animation parameters and modify that object on demand in hook, I believe.
@aymenbachiri-yh2hd
@aymenbachiri-yh2hd 8 ай бұрын
Thank you
@athuljonnie
@athuljonnie 11 ай бұрын
Hey, is it possible to make this component as a background for a div? edit: typo
@ЦзинКэ-ы5х
@ЦзинКэ-ы5х 9 ай бұрын
You can do background: url(%svg%) in CSS, if I understood your question right.
@ashik_dev
@ashik_dev Жыл бұрын
Nice video...
@UnclesmolRSA
@UnclesmolRSA 2 ай бұрын
I feel like this tutorial is for those who know how to do this
@grubbsgaben4461
@grubbsgaben4461 8 ай бұрын
Typical programmer guide: cut out the part where he actually writes the stuff, that we came to see how to do.
@jasperjames123
@jasperjames123 3 ай бұрын
You actually use the word actually quite a lot, actually.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 494 М.
How to Morph an SVG using Framer Motion, Flubber.js and Nextjs
11:00
Olivier Larose
Рет қаралды 13 М.
Каха и дочка
00:28
К-Media
Рет қаралды 3,4 МЛН
Make Awesome SVG Animations with CSS // 7 Useful Techniques
12:20
My Top 5 Techniques for Web Animation
9:58
Olivier Larose
Рет қаралды 116 М.
The Framer Motion Crash Course || React Animation Library 2023
52:36
Tom Is Loading
Рет қаралды 129 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23
Framer Motion (React) - The Basics
17:07
rithmic
Рет қаралды 42 М.
I Redesigned the ENTIRE YouTube UI from Scratch
19:10
Juxtopposed
Рет қаралды 965 М.
Crazy Text Animation with CSS and SVG
5:45
Lun Dev
Рет қаралды 106 М.