SVG wave animation - Two different ways

Рет қаралды 75,345

3 жыл бұрын

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 KZfaq 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

@KevinPowell 3 жыл бұрын

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...*

@GamersOutcast 3 жыл бұрын

This is the best channel for CSS hands down. Great work!

@Vesennia 3 жыл бұрын

Totally agree! He is the best!

@ThomasAgain 3 жыл бұрын

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. 🔥

@ayushp5882 3 жыл бұрын

Really enjoyed the whole popdog card animation !!! Learnt about the keyframes, pulse animation and what not. GR8 work man.

@0xAndy 3 жыл бұрын

This channel is special to me. Nobody else is exploring these super-interesting, obscure web corners.

@CharlesSmall 3 жыл бұрын

Thank you Kevin you make it so clear. It's a pleasure to learn from you.

@fakefury1198 3 жыл бұрын

Amazing Tutorial! You are so awesome Kevin!!!!!

@kristun216 3 жыл бұрын

Keep up the good work my dude. Love your vids.

@rahultirkey7950 3 жыл бұрын

You always come up with good tutorials.

@MohammadAbdulHyeShaon 3 жыл бұрын

Great 👌... Awesome 👍

@hassaneoutouaya 2 жыл бұрын

Thank you Sir !

@und3dpix959 3 жыл бұрын

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 👍

@j0ca1995 3 жыл бұрын

Great video.

@msvmanikantasrivishnu7788 3 жыл бұрын

Thank youuuu

@floriancucu3801 3 жыл бұрын

Thank you Kevin for this amazing tutorial. Do you know where can I find the resources used in this video?

@PaulMcCannWebBuilder 3 жыл бұрын

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.)

@Endrit719 3 жыл бұрын

I mean there is a reason you are known as the king of css

@MsAnnieHuang 3 жыл бұрын

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.

@mrrolandlawrence 3 жыл бұрын

SVG is so under rated.

@anshumanxda 3 жыл бұрын

tr00

@princesiachin279 3 жыл бұрын

finally

@ckernest 3 жыл бұрын

really enjoy this video. May I ask where I can download the source file? thanks.

@clevermissfox 7 ай бұрын

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?

@hustlershorts 3 жыл бұрын

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 ?

@codyshaner3258 3 жыл бұрын

Nice shirt Bro

@LemonDust13 3 жыл бұрын

sweet zelda shirt. triforce hype 😊

@anshumanxda 3 жыл бұрын

2:26 start from here.

@harratreco 3 жыл бұрын

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

@AfrasiabAhmadSU__O_OO_OO 3 жыл бұрын

can you share your vscode settings

@hkasinski13 3 жыл бұрын

Hello Kevin, ty for the video. Can you please tell us what's your vscode theme?

@KevinPowell 3 жыл бұрын

Atom Dark One :)

@iscactus 3 жыл бұрын

How are you copying the SVG into Visual Studio Code from Adobe Illustrator?

@PaulBuys2011 3 жыл бұрын

starts @ 2:31

@dejanpopovic9647 3 жыл бұрын

Anyone have performance issues in Safari with this approach of animating clipPath? Great skill sharing, Kevin :)

@bengbeng2005 2 жыл бұрын

safari does not support clipPath

@benzflynn Жыл бұрын

No CodePen for this ?

@birsingh5388 3 жыл бұрын

Where are you from?

@manaspaul 3 жыл бұрын

Could you make a tutorial about the canva home page does

@manaspaul 3 жыл бұрын

Such a cool svg animation

@2005bgva 3 жыл бұрын

Maybe some one has the original svg code? (Minute 3:46)

@grzegorzt 3 жыл бұрын

I prefer a slightly different solution wigDOTpl ;)

@craigorycoppola1313 3 жыл бұрын

I've got that shirt! What did you think of the hyrule warriors announcement?

@ukyo6195 3 жыл бұрын

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

@avi12 3 жыл бұрын

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.