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
+ Codepen
+ Green Sock
+ Green Sock Plugins
+ Green Sock MorphSVG Documentation
+ Green Sock Timeline Documentation
+ Green Sock Yoyo Method
+ Green Sock Easing
🤖 CODE
+ Final CodePen
📚 REFERENCE
+ CSS-Tricks: Clipping and Masks in CSS
+ Scaling SVG Clipping Paths for CSS Use
👉🏻 Get Updates and Exclusive content at Selfteach.me
💥 SelfTeach.me is a Zeal show