creator-plugin-examples/animation-easing/ui.html at main · LottieFiles/creator-plugin-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      padding: 1rem;
      margin: 0;
      background: #1e1e1e;
      color: #fff;
    }

    h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.125rem;
      font-weight: 600;
      color: #00C1A2;
    }

    p {
      margin: 0 0 1rem 0;
      font-size: 0.8125rem;
      color: #888;
    }

    .section {
      margin-bottom: 1rem;
    }

    .section-title {
      font-size: 0.75rem;
      font-weight: 500;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.03125rem;
      margin-bottom: 0.5rem;
    }

    .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }

    button {
      background: #f5f5f5;
      color: #1e1e1e;
      border: none;
      padding: 0.75rem;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
    }

    button:hover {
      background: #e8e8e8;
    }

    .section:first-of-type button {
      grid-column: span 2;
    }
  </style>
</head>
<body>
  <h3>Animation Easing</h3>
  <p>Compare different easing curves for animations.</p>

  <div class="section">
    <div class="section-title">Compare all</div>
    <div class="buttons">
      <button id="compare">Show all easings side-by-side</button>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Individual easings</div>
    <div class="buttons">
      <button id="linear">Linear (constant speed)</button>
      <button id="ease-in">Ease in (slow start)</button>
      <button id="ease-out">Ease out (slow end)</button>
      <button id="ease-in-out">Ease in out (slow both)</button>
      <button id="bounce">Bounce (overshoot)</button>
    </div>
  </div>

  <script>
    const actions = {
      'compare': 'compare-easings',
      'linear': 'ease-linear',
      'ease-in': 'ease-in',
      'ease-out': 'ease-out',
      'ease-in-out': 'ease-in-out',
      'bounce': 'ease-bounce'
    };

    Object.entries(actions).forEach(([id, type]) => {
      document.getElementById(id).addEventListener('click', () => {
        parent.postMessage({ pluginMessage: { type } }, '*');
      });
    });
  </script>
</body>
</html>