Describe the problem
Issue #482 addresses ease-fade-in specifically, but the problem likely extends to other components. Animating layout-triggering properties (width, height, top, left, margin, padding) causes the browser to recalculate layout on every animation frame, leading to jank on lower-end devices.
Scope of this issue
Conduct a full audit of all @keyframes in the framework and identify any that animate:
width / height (replace with transform: scaleX() / scaleY())top / left / right / bottom (replace with transform: translate())margin / paddingfont-size (replace with transform: scale() where possible)
Deliverable
- Audit report comment listing all offending
@keyframes with their files
- PRs replacing each with GPU-composited equivalents (
transform, opacity)
- Add
will-change: transform, opacity only where the animation is known to run (document the tradeoff)
Why this matters
EaseMotion CSS is positioned as "lightweight and performant." Reflow-triggering animations directly undermine this — especially on mobile and low-power devices.
Note: This is a meta/audit issue, distinct from #482 which addresses only ease-fade-in.
Describe the problem
Issue #482 addresses
ease-fade-inspecifically, but the problem likely extends to other components. Animating layout-triggering properties (width,height,top,left,margin,padding) causes the browser to recalculate layout on every animation frame, leading to jank on lower-end devices.Scope of this issue
Conduct a full audit of all
@keyframesin the framework and identify any that animate:width/height(replace withtransform: scaleX()/scaleY())top/left/right/bottom(replace withtransform: translate())margin/paddingfont-size(replace withtransform: scale()where possible)Deliverable
@keyframeswith their filestransform,opacity)will-change: transform, opacityonly where the animation is known to run (document the tradeoff)Why this matters
EaseMotion CSS is positioned as "lightweight and performant." Reflow-triggering animations directly undermine this — especially on mobile and low-power devices.
Note: This is a meta/audit issue, distinct from #482 which addresses only
ease-fade-in.