67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
|
//
|
||
|
|
// configuration challenge animation
|
||
|
|
//
|
||
|
|
|
||
|
|
var qs = document.querySelector.bind(document)
|
||
|
|
var t = new TimelineLite({
|
||
|
|
onComplete: function() {
|
||
|
|
this.restart()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
var line1 = qs('#c-line-1')
|
||
|
|
var line2 = qs('#c-line-2')
|
||
|
|
var line3 = qs('#c-line-3')
|
||
|
|
var line4 = qs('#c-line-4')
|
||
|
|
var line5 = qs('#c-line-5')
|
||
|
|
var line6 = qs('#c-line-6')
|
||
|
|
var line7 = qs('#c-line-7')
|
||
|
|
var line8 = qs('#c-line-8')
|
||
|
|
var box1 = qs('#c-box-1')
|
||
|
|
var box2 = qs('#c-box-2')
|
||
|
|
var box3 = qs('#c-box-3')
|
||
|
|
var box4 = qs('#c-box-4')
|
||
|
|
var box5 = qs('#c-box-5')
|
||
|
|
var box6 = qs('#c-box-6')
|
||
|
|
var box7 = qs('#c-box-7')
|
||
|
|
var box8 = qs('#c-box-8')
|
||
|
|
var progressBar = qs('#c-loading-bar > rect:last-child')
|
||
|
|
var cog = qs('#c-configuration-server > g > path')
|
||
|
|
|
||
|
|
t
|
||
|
|
.staggerTo(
|
||
|
|
[line1, line2, line3, line4, line5, line6, line7, line8],
|
||
|
|
1.5,
|
||
|
|
{ css: { strokeDashoffset: 0 } },
|
||
|
|
0.3,
|
||
|
|
'start'
|
||
|
|
)
|
||
|
|
.staggerTo(
|
||
|
|
[box1, box2, box3, box4, box5, box6, box7, box8],
|
||
|
|
0.3,
|
||
|
|
{ opacity: 1 },
|
||
|
|
0.3,
|
||
|
|
'-=2.5'
|
||
|
|
)
|
||
|
|
.to(progressBar, 3.5, { width: 40 }, 'start')
|
||
|
|
.to(
|
||
|
|
cog,
|
||
|
|
3.5,
|
||
|
|
{ rotation: 360, svgOrigin: '136px 127px', ease: Power1.easeOut },
|
||
|
|
'start'
|
||
|
|
)
|
||
|
|
.to(line1, 1, {})
|
||
|
|
.to(
|
||
|
|
[line1, line2, line3, line4, line5, line6, line7, line8, progressBar],
|
||
|
|
0.5,
|
||
|
|
{ opacity: 0 },
|
||
|
|
'reset'
|
||
|
|
)
|
||
|
|
.to(
|
||
|
|
[box1, box2, box3, box4, box5, box6, box7, box8],
|
||
|
|
0.5,
|
||
|
|
{ opacity: 0.5 },
|
||
|
|
'reset'
|
||
|
|
)
|
||
|
|
.to(line1, 2, {})
|