-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.js
36 lines (28 loc) · 1 KB
/
404.js
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
var $copyContainer = $(".copy-container"),
$replayIcon = $('#cb-replay'),
$copyWidth = $('.copy-container').find('p').width();
var mySplitText = new SplitText($copyContainer, {type:"words"}),
splitTextTimeline = new TimelineMax();
var handleTL = new TimelineMax();
// WIP - need to clean up, work on initial state and handle issue with multiple lines on mobile
var tl = new TimelineMax();
tl.add(function(){
animateCopy();
blinkHandle();
}, 0.2)
function animateCopy() {
mySplitText.split({type:"chars, words"})
splitTextTimeline.staggerFrom(mySplitText.chars, 0.001, {autoAlpha:0, ease:Back.easeInOut.config(1.7), onComplete: function(){
animateHandle()
}}, 0.05);
}
function blinkHandle() {
handleTL.fromTo('.handle', 0.4, {autoAlpha:0},{autoAlpha:1, repeat:-1, yoyo:true}, 0);
}
function animateHandle() {
handleTL.to('.handle', 0.7, {x:$copyWidth, ease:SteppedEase.config(12)}, 0.05);
}
$('#cb-replay').on('click', function(){
splitTextTimeline.restart()
handleTL.restart()
})