x
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
<div class="flex items-center flex-wrap gap"> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in"> <h2 class="text-lg font-semibold">Fade In</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out"> <h2 class="text-lg font-semibold">Fade Out</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in-bloom"> <h2 class="text-lg font-semibold">Fade In Bloom</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out-bloom"> <h2 class="text-lg font-semibold">Fade Out Bloom</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-up"> <h2 class="text-lg font-semibold">Scale Up</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-down"> <h2 class="text-lg font-semibold">Scale Down</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-up"> <h2 class="text-lg font-semibold">Slide Out Up</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-down"> <h2 class="text-lg font-semibold">Slide Out Down</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-right"> <h2 class="text-lg font-semibold">Slide Out Right</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-left"> <h2 class="text-lg font-semibold">Slide Out Left</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-up"> <h2 class="text-lg font-semibold">Slide In Up</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-down"> <h2 class="text-lg font-semibold">Slide In Down</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-right"> <h2 class="text-lg font-semibold">Slide In Right</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-left"> <h2 class="text-lg font-semibold">Slide In Left</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-spin"> <h2 class="text-lg font-semibold">Animate Spin</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-ping"> <h2 class="text-lg font-semibold">Animate Ping</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-blink"> <h2 class="text-lg font-semibold">Animate Blink</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-float"> <h2 class="text-lg font-semibold">Animate Float</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-bounce"> <h2 class="text-lg font-semibold">Animate Bounce</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-pulse"> <h2 class="text-lg font-semibold">Animate Pulse</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-x"> <h2 class="text-lg font-semibold">Animate Shake X</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-y"> <h2 class="text-lg font-semibold">Animate Shake Y</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-z"> <h2 class="text-lg font-semibold">Animate Shake Z</h2> <button data-action="animation#run"><img src="/assets/circle-play-3c8c1933.svg" width="80" height="80" /></button> </div></div>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
106
107
108
109
110
111
112
113
114
115
116
<div class="flex items-center flex-wrap gap"> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in"> <h2 class="text-lg font-semibold">Fade In</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out"> <h2 class="text-lg font-semibold">Fade Out</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-starting-opacity-value="0" data-animation-var-value="--animate-fade-in-bloom"> <h2 class="text-lg font-semibold">Fade In Bloom</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-fade-out-bloom"> <h2 class="text-lg font-semibold">Fade Out Bloom</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-up"> <h2 class="text-lg font-semibold">Scale Up</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-scale-down"> <h2 class="text-lg font-semibold">Scale Down</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-up"> <h2 class="text-lg font-semibold">Slide Out Up</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-down"> <h2 class="text-lg font-semibold">Slide Out Down</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-right"> <h2 class="text-lg font-semibold">Slide Out Right</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-out-left"> <h2 class="text-lg font-semibold">Slide Out Left</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-up"> <h2 class="text-lg font-semibold">Slide In Up</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-down"> <h2 class="text-lg font-semibold">Slide In Down</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-right"> <h2 class="text-lg font-semibold">Slide In Right</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-slide-in-left"> <h2 class="text-lg font-semibold">Slide In Left</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-spin"> <h2 class="text-lg font-semibold">Animate Spin</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-ping"> <h2 class="text-lg font-semibold">Animate Ping</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-blink"> <h2 class="text-lg font-semibold">Animate Blink</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-float"> <h2 class="text-lg font-semibold">Animate Float</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-bounce"> <h2 class="text-lg font-semibold">Animate Bounce</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-pulse"> <h2 class="text-lg font-semibold">Animate Pulse</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-x"> <h2 class="text-lg font-semibold">Animate Shake X</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-y"> <h2 class="text-lg font-semibold">Animate Shake Y</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div> <div class="card flex flex-col gap-half items-center bg-shade" data-controller="animation" data-action="animationend->animation#cleanup" data-animation-var-value="--animate-shake-z"> <h2 class="text-lg font-semibold">Animate Shake Z</h2> <button data-action="animation#run"><%= image_tag "circle-play.svg", size: 80 %></button> </div></div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.
This stimulus controller is for demonstration purposes only.