Make Awesome SVG Animations with CSS // 7 Useful Techniques
Video Overview & Insights
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo
who is here after seeing gemini 3.1 pro can create svg animations with ease?
00:00 What we're building
00:42 What is an SVG?
So, this is the project ๐ฎ ๐๐ฌ
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
great video
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
Woo i d k anything about code but this is wild.
I feedup with my analitics work now you gave me a hope to relive man this is wild ๐ฅฒ๐ซจ
07:41 5. JS events
08:36 6. Keyframe Animations
Thank you, One problem: if i have to create 30 icons it will take my whole day. Question i have is there any tool which can make this process faster?
10:11 7. Animation Staggering
#css #animation #tutorial
This video is useful!How powerful is SVGs!
Also see...
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
Do you know the definition of word "easy"?
CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG
goood
Install the quiz app ๐ค
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
ok wow
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
thanks man. I was looking exactly for this thing. Didn't know it could be solved this way
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
Hey me!. Watch 11:32 how the variables in CSS work with delay. He Is great at explaining!
- Atom One Dark
- vscode-icons
Very well put together, I learned a lot from that. Thank you!
- Fira Code Font
Shanel Mews
More User Perspectives
Lakin Summit
@JonnieMurphy-i5gMartinez Helen Brown Melissa Lewis Daniel
@ChristopherLopez-g8gYou should talk faster in the next video
@haribokeyHarris Deborah Taylor Sarah Brown Carol
@JoeConstance-i7h45039 Augustine Creek
@VanBrook-d7bGonzalez Mary Thomas Daniel Jones Lisa
@KennethBrown-p5sthankyou very very very much!!!!
@AplusBee-j9zRodriguez Elizabeth Gonzalez Richard Jackson Matthew
@tolyaulyanov186 Jammie Dale
@IleneRokiskythis is a really good tutorial, thanks for sharing it with us <3
@mvonb23Legend tech channel, I will recommend this channel on my tombstone
@ritzierwWow, I am slowly learning to appreciate the synergies of the html/css/javascript ecosystem. It is such an alien way of doing things compared to older tools like Windows Forms or Tkinter, and even those are fancy compared to what I usually get as an embedded C cuy, lol.
I first started seeing the light when I had to wrap my head around the ways of XAML for Microsoft UIs. Declarativeness is powerful, and CSS is dark magic, lol.
This was helpful, I just wish that you would have had the HTML next to the part where you were making the edits to the CSS so I could see exactly what you were styling.
@CalebGentry-s8qLottie (an Airbnb script plugin for After Effects) deals with looping animations done in Adobe After Effects it's literally export and paste and some minimal configuration on the html
@SickOfMetalNetCame from TOP
@sickboydroidThe bolts don't disappear at the same time.
@colinmcdonald6003Anyone else use sketch? Or is everyone on Figma.
@JD33PI never do such detail even though I know this in detail
It's just time consumption
Superb!
Subscribed.
Subcribe already you degenerates
@thederpykrafteri do not have this , animation tab !! how
@CodeWithRainsGreat Video!
@temperkan3727Before this video I was scared of scalable vector graphics, but now, I canโt leave home without one, thanks FireShip
@jonnymidsI just want to recreate the midjourney home page swirl maaaaan ๐ญ๐ญ
@lolztech9267The animations are impressive, but what's even more impressive is your awesome tutorial. Thank you
@brucemozart3665This is really well formatted and precisely explained video. You saved so much of my time with this video. Thank you so much!
@ShmoreIITGFinally Odinproject brought me to my favorite channel
@naifdigitalWell done ๐ฅฐ๐๐โค๏ธ๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐๐
@S-LomarWill this code still work today? Or is it outdated by now?
@lansicus1160Will this code still work today? Or is it outdated by now?
@lansicus1160cool
@GoldenHussanamazing video as always. You are like a gift from the web development gods
@yavuzerkal2551Great content thanks for sharing. Since the video Figma became a subscription based SW.
@Gabor_GThank you.
@unucaggWAAIT I WASN'T SUBSCRIBED???
@trlwaifulover7593You are a genius.
Being able to reverse engineer the animation design and recreate a new one based off of it.
A truly web engineer.
Thankss.
@drianpol