Creating and Animating an SVG Mask

Подписаться 8 тыс.

Просмотров 11 тыс.

50% 1

Recently, I designed a site that had a curved edge at the bottom of the hero image. You've probably seen this on several sites. Nothing crazy or revolutionary here. But, in this video, I'll show you how to code it out as an SVG mask. Then, for added flair, we'll animate it.
0:00 Intro - What we're coding
0:54 jpg - pros and cons
1:29 png - pros and cons
2:07 Creating the mask in Figma
2:54 Getting the assets into CodePen
3:54 Explaining the SVG code
4:40 Turning the SVG into a mask
5:55 Introducing Green Sock
6:21 Creating a second SVG inside Figma
7:34 Brief Explanation of the DOM
8:06 Adding Green Sock to CodePen
8:56 Using MorphSVG
10:02 Using Greensock's Timeline
11:42 Greensock Easing
12:52 Making it Responsive
🔗 LINKS
+ Photo from unsplash.com
+ Codepen - codepen.io
+ Green Sock - greensock.com
+ Green Sock Plugins - greensock.com/products
+ Green Sock MorphSVG Documentation - greensock.com/docs/v3/Plugins...
+ Green Sock Timeline Documentation - greensock.com/docs/v3/GSAP/Ti...
+ Green Sock Yoyo Method - greensock.com/docs/v3/GSAP/Ti...)
+ Green Sock Easing - greensock.com/docs/v2/Easing
🤖 CODE
+ Final CodePen - codepen.io/ahaywood/pen/gOPrWOV
📚 REFERENCE
+ CSS-Tricks: Clipping and Masks in CSS - css-tricks.com/clipping-maski...
+ Scaling SVG Clipping Paths for CSS Use - meyerweb.com/eric/thoughts/201...
👉🏻 Get Updates and Exclusive content at: selfteach.me
💥 SelfTeach.me is a Zeal show: codingzeal.com

Наука

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 56

@vijayroy93 2 года назад

Never seen such easy explanation before. You just take out the complexity from the subject and make it breeze. ❤️

@tiangersbach 2 года назад

wow! this is love at first sight ;) Love the way you made this excercise, explanation, and well documented tuto. You're a great speaker. Thanks!

@SelfTeachMe 2 года назад

Thanks so much! 😊

@friedrichsiever5964 3 месяца назад

Wonderful done. Thanks a million!

@cassieselin983 3 месяца назад

Excellent explanation, thanks!

@carfox1860 Год назад

Great video! Thanks!

@lefxxwill7740 3 года назад

this video was so short but i learned so much! thank you

@SelfTeachMe 3 года назад

Love hearing that!

@user-zi6ej2sx8c 2 года назад

Damn why you don't have a millions of subscribers?? You really deserved that because content and the way you are explaining things are awesome!

@SelfTeachMe 2 года назад

Thanks, I appreciate that!

@thewebspatialist 3 месяца назад

My thoughts exactly...

@jonathanrojaslopez22 3 года назад

Great video and good explanation!! Thank you!!

@SelfTeachMe 3 года назад

Thanks!!

@GustavoBica Год назад

Great content! Super well explained and complete.

@SelfTeachMe 6 месяцев назад

Awesome! Glad you found it helpful!

@burmesepotato447 3 года назад

I have been finding ways how to tackle that wave animation. Amazing personality and tutorial ! Thank you!

@SelfTeachMe 3 года назад

Awesome! Glad you found it helpful!

@manurecaok 2 года назад

Just found this less than 15 minutes GEM and went along with it. You've seriously helped me a lot. THANK YOU! :D ♥

@SelfTeachMe 2 года назад

Love hearing that! Glad you found it helpful

@manurecaok 2 года назад

@@SelfTeachMe Yeah! 🙌 Sorry to bother you but since we're on topic, do you have any content covering masking with lottie animations (made with Bodymovin in After Effects)? Searched all the morning but haven't found anything related to it that's as easy to understand as this was.

@SelfTeachMe 2 года назад

What kind of masking are you trying to do? Use the Lottie file as a mask?

@manurecaok 2 года назад

@@SelfTeachMe Exactly; animated a path then tried to apply this tutorial. But the method fails (surely because of my lack of knowledge) because the export doesn't get me a tag with an ID that parents a tag 😅 So I kind of searched other ways of selecting from css but alas, couldn't find my answer. > I'm an animator with some html css & basic js knowledge 😅 Btw thank you for answering! Edit: grammar

@LuukBod Год назад

@@manurecaok Have you ever found the answer to this? I'm currently facing the exact same issue!

@KenoldBeauplan 3 года назад

Wow! so easy! I just created something similar with position relative/absolute. It took me forever. Thank you.

@SelfTeachMe 3 года назад

That's awesome!! Excited for you.

@thewebspatialist 3 месяца назад

You just make it all seem too easy...thank you

@huyvuduc791 2 года назад

Great video! thanks so much from JP

@SelfTeachMe 2 года назад

You're welcome! Glad you liked it.

@digital360europes.r.l7 3 года назад

Great! Thank you so much!!!

@SelfTeachMe 3 года назад

You're welcome! Glad you liked it.

@suleymanbayram1639 Год назад

when i see like you people who always be happy and energy i am always jealous you guys. :)

@marknikolsky9352 3 года назад

You are very cool speaker!

@SelfTeachMe 3 года назад

Thanks, Mark

@kevinhe8188 Год назад

really inspired by your video, super good,:) And I have met a problem too, for i used a path as clip path to mask an image,the clip path is always on the top left corner of the image, yes, i can scale to let it mask whole image , but that's too big, so my question is can i re-positioning the path ? thanks

@amrutaparab4939 3 месяца назад

Nice video. Is it possible to reverse this wave? like i want the image to be at the bottom (in the white part) and I want the part where the image is currently, to be white. Any help appreciated.

@AgustinGiannastasio 2 года назад

awesome

@SelfTeachMe 2 года назад

Yeah!! Glad you enjoyed it.

@klirmio21 6 месяцев назад

Holy shit this was sooooo goooooodddd goddamit

@SelfTeachMe 6 месяцев назад

Glad you found it helpful!

@alvarosuareztrabanco5400 2 года назад

Hi! Thanks A LOT for this video. It really helped me. Is there a way to preserve the aspect ratio of the clip path? preserveAspectRatio in the SVG doesn't help.

@SelfTeachMe 2 года назад

I'm not sure if this is exactly what you're looking for or not, but it looks like you need to preserve the aspect ratio of the image itself, not necessarily the clipPath. Take a look at this (forked) CodePen: codepen.io/ahaywood/pen/ExmBxeq The only thing I changed was the height property (CSS) on the img tag. It now scales and maintains it aspect ratio.

@alvarosuareztrabanco5400 2 года назад

@@SelfTeachMe Hi! thanks a lot for the effort you took. I was clipping a div with a background that is part of a css grid. I was defining the height of the row through grid-template-rows. It's a little very specific case and I'd be solving it by including the image itself (which as you shown preserves the aspect ratio of the svg). Thanks!

@AmyHaywoodDutton 2 года назад

@@alvarosuareztrabanco5400 Awesome! Glad you got it working!

@olegkoselev6975 3 года назад

Hi )) really nice tutorial )) but unfortunately morphing with clip path is not working for safari. I am using KUTE.js and its not working as well same as GSAP (at least codepen you created is not running for me). Am I missing anything or its really the case? Thanks for every advice ;)

@SelfTeachMe 3 года назад

Hey Oleg! It looks like there are some issues with this particular feature of Green Sock and Safari. I did a little Googling and several people have reported problems. Sorry for the trouble.

@Mike-jq7os Год назад

Wow

@barry-yo6752 3 года назад

My logo file ,, why using

@SelfTeachMe 3 года назад

There are several things that might be causing this. Are you running a local server? Is your html in the same directory as your image folder?

@barry-yo6752 3 года назад

@@SelfTeachMe yes local server , I was save same project directory , but have crate name file is : image ,, and than saving inside , than copy this path ,that copy have past to image

@barry-yo6752 3 года назад

before : image="images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2020/May/Dashboard/Fuji_Dash_Electronics_1x._SY304_CB432774322_.jpg". that is ok ! after : image ="/Users/yutungcheng/project_front/Amazon/amazone-clone/image/2015Macbook.png". but appear " only free space "