🚀 3 tips on CSS animations. #ux #dev
Pull to Refresh
Brandon Corbin Oct 30 2020

🚀 3 tips on CSS animations. #ux #dev

Animation Image

  1. The browser is really good at transforming: opacity, translate*, and scale
  2. The browser sucks at transforming any geometry, like height, width, top, bottom, left, right.
  3. iOS is flickery when it comes to setting a background image using a CSS variable.

A fun way of controlling your styles in javascript, while having CSS execute the animation is to bind a CSS variable to the element, then use that css variable in the elements CSS.

<header :style="`--scrollPercent:${scrollPercent}`" /><style> 
header {
   opacity: var(--scrollPercent);
}
</style>