Today I created an Amazing Profile Card. In this Hover Effect, I am using only HTML CSS to create animation.
I hope you find this useful like and save this post also comments about your thoughts and new ideas for a topic. For more content follow me on Instagram @developer_nikhil27.
Thank you!
Top comments (7)
I think it's worth elaborating on BEM: Do not feel tempted to use BEM for your entire application, ever. Use it for self-contained components, and compose those. Using BEM at a scale larger than that leads to two inevitabilities: cases you can't represent properly, and heavy maintenance costs to any reasonably-large changes.
BEM works great for components with moderate nesting - but even there something like Tailwind or styled-components (i.e. CSS in JS) just wins flat-out many times.
It is a good practice to switch
will-changeon and off using script code before and after the change occurs.Adding
will-changedirectly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have.The browser already tries as hard as it can to optimize everything don't add the
will-changeproperty to elements just to wring out a little more speed.will-changeis intended to be used as something of a last resort, in order to try to deal with existing performance problems.Excessive use of will-change will result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. This will lead to worse performance.
cc MDN
I tested your fork;
Paint flashingandLayer borderswill-change) and I saw no painting (screen flashing green) occurred in both cases and the layer borders were the same in both cases. That means the browser already optimized that animation.If
will-changewas adding any more optimizations, there would have been more layers borders and less painting (in this case no paintings happened in both tests).You could test it on your end to see if I missed anything.
Side-note:
For browsers that don’t support
will-change, but benefit from layer creation, such as older versions of Safari and Mobile Safari, you need to use a 3D transform to force a new layer:transform: translateZ(0);More on enabling Layer Borders and enabling realtime Paint Flashing, borders meaning 👉 Chromium's source code and Stackoverflow answer by Paul Irish (note the link to debug.cc in this answer is broken so just check the Chromium's source code I linked)
More resources:
Although it is a good property it shouldn't be used to promote elements to a new layer unnecessarily.
If you have promoted an element to a new layer, use DevTools to confirm that doing so has given you a performance benefit. Don't promote elements without profiling.
I also agree with you that if the element is going to be animated constantly (for example scroll animations) and there's a performance benefit its much better to use the
will-changeproperty in the stylesheets.Side-note:
If anyone notices any performance benefit when testing this fork, know that
will-changeoptimizations depends on the resources (memory, computing power) available to your browser, meaning it varies in user machines (both desktops, laptops and mobile phones). So me not seeing any optimizations could mean my machine has enough resources for my browser to optimize the animation itself.Pretty good 😉👍
Little, tiny suggestion. I think box shadow is enough for hover, but that's just my subjective opinion.
Keep on Coding ;) Best regards :)
Whoa!! That was pretty a stuff Luke.. 🤩
Learned a lot from the comment.
This is why the developers community is the best!! Always ready to help and spread knowledge.
Keep sharing!
Good recommendation
Good one!