Awesome UI Interactions with the CSS Clip Path Property 

What is your choice, XD, Sketch or Invision. Would love to know your opinion as a designer

Nothing yet

@@mirrorlineentertainments9950 XD or Figma....Invision next....Sketch maybe never

@@thedeveloper4207 Why never?

@@mirrorlineentertainments9950 Tools are just tools. They all work in a similar way. What really matters is how you build your design.

😂😂 Till dawn

Also no units needed for 0, *rgba(255, 255, 255, 0);* can be *rgba(0, 0, 0, 0);* or simply *opacity: 0;* but don't forget to animate the opacity property in transition.

I always use this at the beginning of every css file: *{ box-sizing: border-box; }

@@musthavechannel5262 You're correct with using opacity. But if you use rgba(0,0,0,0) the color would be changing during the .5s transition. So halfway during the transition the text would actually be rgba(127,127,127,0.5). Hardly noticeable that the "i" is gray at half opacity, but it's still an unwanted side effect you'd want to avoid. I'm with you on using opacity though.

If you understand CSS then Sass won't be that hard. It's really useful as it greatly shortens down repetitive code, for example putting classes inside of the container class which would compile it to ".container .class" There's also functions, variables (which are a thing in CSS now but still) and a bunch more. Quite interesting, W3Schools has a really good tutorial on it if you think it sounds useful

Ya css has gotten pretty powerful over the years.

Hate to be 'that guy', but place-items doesn't work in Edge. : (

thks

bro Programming BY TSH This channel is so good bro .....channel name - Programming BY TSH

bro Programming BY TSH This channel is so good bro .....channel name - Programming BY TSH

In additon, You should mention that `will-change` shouldn't be overused, and attached possibly just before transition happens, because it forces browser to create new layout layer ;)

I would say, these online web tutors should always mention this as a side note whenever they're animating the properties that are expensive. The clip-path may be easier to create this effect but not so performant on mobile devices. There should be more tutorials on creating animations like these but by only using transform as much as possible. I did something like what he showed in the video but using only transform property and it was pretty difficult to achieve compared to the clip-path, height/width method but much more smoother.

When designing or programming, performance is important, but it is also too easy to jump in the rabbit hole of pre-optimization which is bad, because then you're writing code for optimization rather than readability most of the times, and that can hurt maintainability. Build first, optimize later. I like to think of performance as an accessibility, but don't overdo it. Sometimes it comes with costs too. E.g. the overuse of things like will-change, memoization, etc. can cause a design or an app to become slower over time. Test different devices and browsers to see if it affects performance, or has different visual artifacts. If your animations causes performance issues, just remove them. The less animation, the better. They may look fancy, but animations can hurt accessibility if it's overdone, so use it sparingly. Also opacity and color are different operations. Depending on what you're trying to achieve, you may have to consult to using one or the other. For example can animating opacity cause antialiasing on text to glitch in some browsers and devices such as WebKit/Safari, Opera, etc.

Makes far more sense to use `opacity` or `display: none` over just changing color. What if I want to change the font color to orange? You'll get a weird gradient change from orange to white to transparent by using the color property.