Skip to content

Commit 5afd38f

Browse files
juliangarnierjuliangarnier
committed
v4.1.0
1 parent e82298d commit 5afd38f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+10758
-825
lines changed

‎assets/sponsors/huly-logomark-dark.png

-24 KB
Binary file not shown.

‎assets/sponsors/huly-logomark.png

-23.1 KB
Binary file not shown.

‎examples/svg-graph/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>SVG Graph / Anime.js</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
<link href="../assets/css/styles.css" rel="stylesheet">
8+
<style>
9+
body {
10+
min-height: 100lvh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
#graph {
16+
position: relative;
17+
border: 1px solid rgba(255,255,255,.1);
18+
width: 942px;
19+
height: 352px;
20+
background: #272421;
21+
}
22+
svg {
23+
position: absolute;
24+
bottom: 0;
25+
left: 0;
26+
}
27+
#views {
28+
position: absolute;
29+
top: 20px;
30+
right: 20px;
31+
font-family: BerkeleyMono-Regular;
32+
font-size: 50px;
33+
text-align: right;
34+
}
35+
#label {
36+
display: block;
37+
font-size: 20px;
38+
color: #F6F4F2;
39+
}
40+
#count {
41+
font-family: BerkeleyMono-Regular;
42+
font-size: 50px;
43+
color: #B7FF54;
44+
text-align: right;
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<div id="graph">
50+
<svg width="940" height="290" viewBox="0 0 940 290"><defs><linearGradient id="c" x1="50%" x2="50%" y1=".399%" y2="87.205%"><stop offset="0%" stop-color="#B7FF54" stop-opacity=".211"/><stop offset="100%" stop-color="#B7FF54" stop-opacity="0"/></linearGradient><rect id="b" width="900" height="250" x="0" y="0"/><path id="a" d="M0,0 L940,0 L940,290 L0,290 L0,0 Z"/></defs><g fill="none" fill-rule="evenodd"><use xlink:href="#a" fill="#272421"/><g transform="translate(20 20)"><mask id="d" fill="#fff"><use xlink:href="#b"/></mask><path fill="url(#c)" stroke="#B7FF54" stroke-width="4" d="M-29.9084975,125.442049 C0.592599392,125.442049 26.5003803,199.691642 59.4112837,199.691642 C92.322187,199.691642 113.7965,108.141783 127.38192,79.926918 C140.96734,51.7120527 152.068784,5.15668539 180.801803,30.2096433 C209.534821,55.2626012 212.50407,56.7639176 230.281891,56.7639176 C248.059712,56.7639176 281.005076,76.9686041 289.048637,107.339775 C297.092198,137.710946 301.167159,161.192233 318.659135,171.388065 C336.151111,181.583897 346.858132,163.610445 355.870023,132.663097 C364.881913,101.715749 367.137656,101.502549 393.914073,101.502549 C420.69049,101.502549 435.873542,104.822478 454.251861,114.536107 C472.63018,124.249736 492.205061,129.256489 502.089999,151.958408 C511.974938,174.660327 523.807615,199.691642 549.270028,199.691642 C574.732442,199.691642 579.028989,136.335995 586.711365,114.536107 C594.393742,92.7362195 620.605115,121.939481 640.47249,125.442049 C660.339864,128.944617 697.353541,112.61418 705.490168,133.317716 C713.626795,154.021252 727.481496,188.892846 756.256164,188.892846 C785.030831,188.892846 781.166604,121.152289 823.970316,113.461034 C866.774027,105.769778 893.00728,107.339775 907.900967,107.339775 C907.900967,107.339775 907.900967,166.243609 907.900967,284.051276 L-29.9084975,284.051276 C-29.9084975,178.017092 -29.9084975,125.14735 -29.9084975,125.442049 Z" mask="url(#d)"/></g></g></svg>
51+
<div id="views"><span id="label">views</span><span id="count">1145097</span></div>
52+
</div>
53+
<script type="module" src="./index.js"></script>
54+
</body>
55+
</html>

‎examples/svg-graph/index.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
svg,
3+
animate,
4+
createTimeline,
5+
stagger,
6+
utils,
7+
} from '../../lib/anime.esm.js';
8+
9+
const line = svg.createDrawable('line');
10+
11+
createTimeline({
12+
loop: true,
13+
defaults: {
14+
ease: 'inOut(3)',
15+
duration: 2000,
16+
}
17+
})
18+
.add('#views', {
19+
opacity: [0, 1],
20+
duration: 500,
21+
}, 0)
22+
.add('#b', {
23+
x: [0, 0],
24+
width: [0, 900],
25+
}, 0)
26+
.add('#count', {
27+
innerHTML: { from: 0 },
28+
modifier: v => utils.round(v, 0).toLocaleString(),
29+
}, '<<')
30+
.add('#b', {
31+
x: 900,
32+
width: 0,
33+
duration: 1500,
34+
}, '+=500')
35+
.add('#views', {
36+
opacity: 0,
37+
duration: 1500,
38+
}, '<<')
39+
.init()

‎examples/text/hover-effects/index.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Text / Hover effects / Anime.js</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
<link href="../../assets/css/styles.css" rel="stylesheet">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap" rel="stylesheet">
11+
<style>
12+
13+
body {
14+
display: flex;
15+
justify-content: center;
16+
flex-direction: column;
17+
align-items: center;
18+
min-height: 100svh;
19+
font-family: "Noto Sans JP", sans-serif;
20+
font-kerning: none;
21+
font-variant-ligatures: none;
22+
text-rendering: optimizeSpeed;
23+
}
24+
25+
main {
26+
margin: 0 auto;
27+
padding: 20px;
28+
width: 100%;
29+
max-width: 1200px;
30+
display: grid;
31+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
32+
gap: 20px;
33+
justify-content: center;
34+
container-type: inline-size;
35+
}
36+
37+
article {
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: center;
41+
align-items: center;
42+
min-height: 200px;
43+
padding: 20px;
44+
container-type: inline-size;
45+
border-radius: 1cqw;
46+
background: #2A2A2A;
47+
color: #D0D0D0;
48+
transition: background-color .25s ease-out;
49+
}
50+
51+
article:has(p) {
52+
/*justify-content: flex-start;*/
53+
align-items: flex-start;
54+
}
55+
56+
article:hover {
57+
cursor: default;
58+
background: #303030;
59+
}
60+
61+
article a,
62+
article a span {
63+
color: var(--red);
64+
}
65+
66+
article a span {
67+
text-decoration: underline;
68+
}
69+
70+
article code {
71+
font-family: monospace;
72+
color: #B0B0B0;
73+
}
74+
75+
article p {
76+
width: 100%;
77+
font-size: clamp(14px, 5cqw, 18px);
78+
}
79+
80+
article strong {
81+
font-weight: 600;
82+
}
83+
84+
article h2 {
85+
text-align: center;
86+
font-size: clamp(20px, 8cqw, 30px);
87+
}
88+
89+
</style>
90+
</head>
91+
<body>
92+
<main>
93+
<article id="info">
94+
<p>This is a collection of text effects made with Anime.js v4 and the new text splitter utility function.</p>
95+
<p>Hover the cards to trigger the animations.</p>
96+
<p>Learn more at <a href="https://animejs.com/documentation">animejs.com</a>.</p>
97+
</article>
98+
<article id="wavy-text-effect">
99+
<h2>Waaaaavvvvy</h2>
100+
</article>
101+
<article id="slide-up">
102+
<h2>Raining letters</h2>
103+
</article>
104+
<article id="light-words">
105+
<h2>Subtle text highlight</h2>
106+
</article>
107+
<article id="words-3d-jp">
108+
<h2>3Dで単語を回転させる</h2>
109+
</article>
110+
<article id="words-slide-x">
111+
<h2>Horizontal shift split</h2>
112+
</article>
113+
<article id="lines-mask">
114+
<p>This is an example of lines masking that works by only splitting words. This allows animating per line even when the text contains multiple levels of nested elements, like <a href="https://animejs.com/">links with multiple words and nested <strong>strong & <em>em tags</em></strong></a>.</p>
115+
</article>
116+
<article>
117+
<h2>Effect 5</h2>
118+
</article>
119+
<article>
120+
<h2>Effect 6</h2>
121+
</article>
122+
<article>
123+
<h2>Effect 7</h2>
124+
</article>
125+
<article>
126+
<h2>Effect 8</h2>
127+
</article>
128+
<article>
129+
<h2>Effect 9</h2>
130+
</article>
131+
</main>
132+
<script type="module" src="./index.js"></script>
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)