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

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! 😊

Excellent explanation, thanks!

Wonderful done. Thanks a million!

Great content! Super well explained and complete.

@SelfTeachMe

7 ай бұрын

Awesome! Glad you found it helpful!

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

@SelfTeachMe

3 жыл бұрын

Love hearing that!

Great video! Thanks!

Great video and good explanation!! Thank you!!

@SelfTeachMe

3 жыл бұрын

Thanks!!

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!

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.

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!

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

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

Great video! thanks so much from JP

@SelfTeachMe

2 жыл бұрын

You're welcome! Glad you liked it.

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

Great! Thank you so much!!!

@SelfTeachMe

3 жыл бұрын

You're welcome! Glad you liked it.

You are very cool speaker!

@SelfTeachMe

3 жыл бұрын

Thanks, Mark

Holy shit this was sooooo goooooodddd goddamit

@SelfTeachMe

6 ай бұрын

Glad you found it helpful!

awesome

@SelfTeachMe

2 жыл бұрын

Yeah!! Glad you enjoyed it.

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

Wow

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.

Дякую!

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!

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.

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 "

Thanks, very nice explanation I really dislike greensock though

@SelfTeachMe

3 жыл бұрын

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" ⁉ 👿

@SelfTeachMe

2 жыл бұрын

Ahh, sorry for the confusion. I was thinking about a mask from a design perspective and not from a coding / implementation standpoint.