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
enami.js
a simple animation-
on-scroll library
5kb minified!
ABOUT
enami.js provides an easy way to animate elements on visibility, it uses the Intersection Observer API to add attributes and css variables to elements visible on the screen.
- 🏀 Create your own CSS Animations
- 🎲 Staggering Effect
- 🎎 Parenting triggering
- 🎳 Delay setting
- 🪁 Duration setting
- 🌗 Offset setting
HOW TO USE
1.Add enami.js script
<script src="https://unpkg.com/enami@0.8.0/dist/enami.min.js"></script>2.Add enami.css style
<link rel="stylesheet" href="https://unpkg.com/enami@0.8.0/dist/enami.min.css">
3.Add data-enami attribute to your elements
<h2 data-enami="fade-up"></h2>4.Initialize the script
<script>new enami();</script>
ENAMI PRE-BUILT ANIMATIONS (enami.css)
Click on an animation to preview it ➡️
DEMOS
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
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
8
4
5
1
6
2
9
3
7
10
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
METHODS AND EVENTS
Events Log
Demo
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