Optimize animations and transitions

will-change is apparently not enough to run GPU-enabled animations, use translateZ on top of it
2020-04-09 20:23:24 +02:00
parent 7a44d5b0ed
commit be0f4c8b59
16 changed files with 75 additions and 43 deletions
--- a/src/atoms/Counter.svelte
+++ b/src/atoms/Counter.svelte
@@ -38,7 +38,7 @@

 <div class="counter {className}" bind:this={counter}>
    {#each digits as digit}
-    <div class="counter__column" style="transform: translateY(-{digit}0%);">
+    <div class="counter__column" style="transform: translateY(-{digit}0%) translateZ(0);">
        {#each numbers as number}
        <span>{number}</span>
        {/each}