@@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 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
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.
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
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.
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.
@@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!
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 ;)
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.
@@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
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 "
Never seen such easy explanation before. You just take out the complexity from the subject and make it breeze. ❤️
Just found this less than 15 minutes GEM and went along with it. You've seriously helped me a lot. THANK YOU! :D ♥
Love hearing that! Glad you found it helpful
@@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.
What kind of masking are you trying to do? Use the Lottie file as a mask?
@@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
@@manurecaok Have you ever found the answer to this? I'm currently facing the exact same issue!
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!
Thanks, I appreciate that!
My thoughts exactly...
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!
Thanks so much! 😊
this video was so short but i learned so much! thank you
Love hearing that!
I have been finding ways how to tackle that wave animation. Amazing personality and tutorial ! Thank you!
Awesome! Glad you found it helpful!
Wonderful done. Thanks a million!
Excellent explanation, thanks!
Great video! Thanks!
Great video and good explanation!! Thank you!!
Thanks!!
Great content! Super well explained and complete.
Awesome! Glad you found it helpful!
Great video! thanks so much from JP
You're welcome! Glad you liked it.
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.
Thank you!! Liked, subscribed!
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
You just make it all seem too easy...thank you
Holy shit this was sooooo goooooodddd goddamit
Glad you found it helpful!
You are very cool speaker!
Thanks, Mark
cool video, thanks! why 1440x595 tho?
my hero image is set to full screen, so not sure how to deal with the height :/
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.
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.
@@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!
@@alvarosuareztrabanco5400 Awesome! Glad you got it working!
when i see like you people who always be happy and energy i am always jealous you guys. :)
Wow! so easy! I just created something similar with position relative/absolute. It took me forever. Thank you.
That's awesome!! Excited for you.
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 ;)
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.
Great! Thank you so much!!!
You're welcome! Glad you liked it.
My logo file ,, why using
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?
@@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
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 "
awesome
Yeah!! Glad you enjoyed it.
Wow
Дякую!
Thanks, very nice explanation
I really dislike greensock though
Thanks for the comment... any particular reason why you don't like Greensock? What's your alternative?
Well you use a plugin so we don't understand how it works : /
Madam!
The title says Mask, but you've shown CSS "clip" ⁉ 👿
Ahh, sorry for the confusion. I was thinking about a mask from a design perspective and not from a coding / implementation standpoint.