- The browser is really good at transforming: opacity, translate*, and scale
- The browser sucks at transforming any geometry, like height, width, top, bottom, left, right.
- 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>