animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Motion Table - Symmetric Move

1<div class="relative flex items-center justify-center">
2  <div class="bar-1">
3    <div class="arrow left"></div>
4    <div class="flex flex-col items-center self-stretch">
5      <div class="lines top">
6        <div class="line w-half" style="animation-delay: 1s"></div>
7        <div class="line w-quarter-3" style="animation-delay: 0.8s"></div>
8      </div>
9      <div class="block">
10        <span class="whitespace-no-wrap staggered-scale-in">High stakes table</span>
11      </div>
12      <div class="lines bottom">
13        <div class="line w-quarter-3" style="animation-delay: 0.8s"></div>
14        <div class="line w-half" style="animation-delay: 1s"></div>
15      </div>
16    </div>
17    <div class="arrow right"></div>
18  </div>
19  <div class="bar-2">
20    <div class="clips -space-x-8">
21      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.35s)"></div>
22      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.3s)"></div>
23      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.25s)"></div>
24      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.2s)"></div>
25      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.15s)"></div>
26      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.1s)"></div>
27      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.15s)"></div>
28      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.2s)"></div>
29      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.25s)"></div>
30      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.3s)"></div>
31      <div class="clip" style="animation-delay: calc(var(--bar-1-duration) + 0.35s)"></div>
32    </div>
33    <div class="arrows">
34      <div class="arrow top"></div>
35      <div class="arrow right"></div>
36      <div class="arrow bottom"></div>
37      <div class="arrow left"></div>
38    </div>
39    <div class="block">
40      <span class="absolute staggered-scale-in">$100-$200</span>
41    </div>
42    <div class="lines">
43      <div class="line left-top"></div>
44      <div class="line right-top"></div>
45      <div class="line left-bottom"></div>
46      <div class="line right-bottom"></div>
47    </div>
48  </div>
49</div>
50