/
garbage
72 lines (65 loc) · 2.07 KB
/
garbage
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
.ml1 {
font-weight: 900;
font-size: 4.5em;
}
.ml1 .letter {
display: inline-block;
line-height: 1em;
}
.ml1 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml1 .line {
opacity: 0;
position: absolute;
left: 0;
height: 3px;
width: 100%;
background-color: black;
transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
<!--<h1 class="ml1" style="margin-top: 20%; margin-left:10%">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters" style="font-family: 'Eczar'; serif">ArtGeeks</span>
<span class="line line2"></span>
</span>
</h1>-->
// Wrap every letter in a span
$('.ml1 .letters').each(function(){
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({loop: true})
.add({
targets: '.ml1 .letter',
scale: [0.3,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 600,
delay: function(el, i) {
return 70 * (i+1)
}
}).add({
targets: '.ml1 .line',
scaleX: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: function(el, i, l) {
return 80 * (l - i);
}
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});