Creating and Animating an SVG Mask
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 - http://codepen.io
Green Sock - http:// greensock.com
Green Sock Plugins - http://greensock.com/products
Green Sock MorphSVG Documentation - https://greensock.com/docs/v3/Plugins...
Green Sock Timeline Documentation - https://greensock.com/docs/v3/GSAP/Ti...
Green Sock Yoyo Method - https://greensock.com/docs/v3/GSAP/Ti...)
Green Sock Easing - https://greensock.com/docs/v2/Easing
🤖 CODE
Final CodePen - https://codepen.io/ahaywood/pen/gOPrWOV
📚 REFERENCE
CSS-Tricks: Clipping and Masks in CSS - https://css-tricks.com/clipping-maski...
Scaling SVG Clipping Paths for CSS Use - http://meyerweb.com/eric/thoughts/201...
👉🏻 Get Updates and Exclusive content at: http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
