SVG wave animation - Two different ways
For a limited time, use this link to get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell09202
SVG's are incredibly useful. In this video, I explore two different ways we can make a wave animation that hides away a part of the content. The first one is a simple keyframes animation, and the second one uses SMIL animation, which is part of the SVG specifications.
This video was sponsored by Skillshare
#svg #animation
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZread channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Пікірлер: 56
For a limited time, use this link to get a free trial of Skillshare Premium Membership: skl.sh/kevinpowell09202
@suraj351
3 жыл бұрын
*Hello sir ! Plz make video on Css3 Pneumorphism in detail plz...*
This is the best channel for CSS hands down. Great work!
@Vesennia
3 жыл бұрын
Totally agree! He is the best!
I love the content you cover on this channel! SVG animations are something I am trying to level up on at the moment, thx for sharing. 🔥
Really enjoyed the whole popdog card animation !!! Learnt about the keyframes, pulse animation and what not. GR8 work man.
Amazing Tutorial! You are so awesome Kevin!!!!!
Thank you Kevin you make it so clear. It's a pleasure to learn from you.
This channel is special to me. Nobody else is exploring these super-interesting, obscure web corners.
Keep up the good work my dude. Love your vids.
You always come up with good tutorials.
Thank you Sir !
Great 👌... Awesome 👍
Thursday is tomorrow and I can't wait :D Great work btw! :D
@KevinPowell
3 жыл бұрын
I might not be able to do it tomorrow 😢
@und3dpix959
3 жыл бұрын
@@KevinPowell ooooh... no :( I almost run out of your content now. I am watching stuff from 2017 ...
@KevinPowell
3 жыл бұрын
@@und3dpix959 I might try to squeeze something in Friday. And starting next week I'll be on schedule 👍
Great video.
Thank youuuu
Thank you Kevin for this amazing tutorial. Do you know where can I find the resources used in this video?
2:26 start from here.
I mean there is a reason you are known as the king of css
I accidentally made the SVG with 3 waves, so I had to redo the math, which helped me understand things better if making it responsive: the width of the SVG is 200% of the .card width, so it's 600px wide. Translating -50% makes it move half of that (-300px) which is wrong with 3 waves. Moving it a third (-200px or -33%) made it work. Change the card width to a responsive unit (percent, viewport unit etc) and you've got a responsive effect. Also, SVG is pronounced Sh-VIG. (Or at least should be.)
What is the content of the original svg file that got copy into the wave.html? It's hard to follow when we don't have that file.
SVG is so under rated.
@anshumanxda
3 жыл бұрын
tr00
20:07 when you drop the svg into the DOM, even though it has height and width of 0, it’s taking up space? It pushes your card up. How do you fix that so it takes up no space in the body?
really enjoy this video. May I ask where I can download the source file? thanks.
Nice shirt Bro
sweet zelda shirt. triforce hype 😊
finally
Hello Kevin, ty for the video. Can you please tell us what's your vscode theme?
@KevinPowell
3 жыл бұрын
Atom Dark One :)
actualy what I did is that I maked the background div of the card have a background-image and a background-color at the same time and then adjusting the position of the background-image without needing to use the img tag ?
starts @ 2:31
can you share your vscode settings
How are you copying the SVG into Visual Studio Code from Adobe Illustrator?
No CodePen for this ?
Hi guys, does anyone have links to resources on how to create a web app, add plugin functionality and ability for devs to develop plugins for it? Like how wordpress has it's plugins OR shopify & it's plugin. Thanks
Where are you from?
Anyone have performance issues in Safari with this approach of animating clipPath? Great skill sharing, Kevin :)
@bengbeng2005
2 жыл бұрын
safari does not support clipPath
Could you make a tutorial about the canva home page does
@manaspaul
3 жыл бұрын
Such a cool svg animation
I've got that shirt! What did you think of the hyrule warriors announcement?
Maybe some one has the original svg code? (Minute 3:46)
I prefer a slightly different solution wigDOTpl ;)
Great, but it all doesn’t work on mobile devices!?
@KevinPowell
3 жыл бұрын
The second method? SMIL is supported by mobile browsers 🤔
@ukyo6195
3 жыл бұрын
@@KevinPowell I mean the original popdog site, on iOS iPad you see no animations 🤔
@Beraksekebon21
3 жыл бұрын
@@ukyo6195 its only work on certain break point i guess
Pretty good content, but please try to record in a single shot, even if it takes multiple attempts to get right, rather than multiple shots, and then edit in a way that will break the overall coherency
@KevinPowell
3 жыл бұрын
Sorry about that :) I usually do, but sometimes I have a mistake I don't realize while recording that I need to remove.