-
Notifications
You must be signed in to change notification settings - Fork 15
/
progress.js
124 lines (107 loc) · 4.26 KB
/
progress.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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { Xt } from 'xtend-library/src/xt.js'
import 'xtend-library/src/variables.js'
import 'xtend-library/src/extensions/slider/slider.js'
import 'xtend-library/src/addons/animation/mouse-follow.js'
import gsap from 'gsap'
Xt.mount.push({
matches: '.demo--slider-progress',
mount: object => {
// vars
const spinnerTime = Xt.vars.timeTiny
const spinnerEase = 'linear'
const fillerTime = Xt.vars.timeTiny
const fillerEase = 'linear'
// init
let self = new Xt.Slider(object, {
auto: {
time: 4000,
},
})
// start auto
const eventAutostart = () => {
// slider
const spinner = self.object.querySelectorAll('.spinner svg:nth-child(1) circle')
const timeline = gsap.timeline({ overwrite: false })
timeline.to(spinner, { strokeDashoffset: 628, duration: spinnerTime, ease: spinnerEase, autoRound: false })
timeline.to(spinner, { strokeDashoffset: 0, duration: self.options.auto.time - spinnerTime, ease: spinnerEase, autoRound: false })
// elements
const elements = self.elements.filter(x => self.hasCurrent(x))
for (const element of elements) {
const fillers = element.querySelectorAll('.filler span:nth-child(1)')
for (const filler of fillers) {
gsap.set(filler, { height: 0, top: '100%' })
gsap.to(filler, { height: '100%', top: 0, duration: self.options.auto.time, ease: fillerEase })
}
}
// targets
const targets = self.targets.filter(x => self.hasCurrent(x))
for (const target of targets) {
const fillers = target.querySelectorAll('.filler span:nth-child(1)')
for (const filler of fillers) {
gsap.set(filler, { width: 0, left: 0 })
gsap.to(filler, { width: '100%', left: 0, duration: self.options.auto.time, ease: fillerEase })
}
}
}
self.object.addEventListener('autostart.xt', eventAutostart)
// stop auto
const eventAutostop = () => {
// elements
const elements = self.elements.filter(x => self.hasCurrent(x))
for (const element of elements) {
const fillers = element.querySelectorAll('.filler span:nth-child(1)')
for (const filler of fillers) {
gsap.to(filler, { height: 0, top: 0, duration: fillerTime, ease: fillerEase })
}
}
// targets
const targets = self.targets.filter(x => self.hasCurrent(x))
for (const target of targets) {
const fillers = target.querySelectorAll('.filler span:nth-child(1)')
for (const filler of fillers) {
gsap.to(filler, { width: 0, left: '100%', duration: fillerTime, ease: fillerEase })
}
}
}
self.object.addEventListener('autostop.xt', eventAutostop)
// pause auto
const eventAutopause = () => {
// slider
const spinner = self.object.querySelectorAll('.spinner svg:nth-child(1) circle')
gsap.to(spinner, { strokeDashoffset: 628, duration: spinnerTime, ease: spinnerEase, autoRound: false })
// elements
const elements = self.elements.filter(x => self.hasCurrent(x))
for (const element of elements) {
const fillers = element.querySelectorAll('.filler span:nth-child(1)')
for (const filler of fillers) {
gsap.to(filler, { height: 0, top: '100%', duration: fillerTime, ease: fillerEase })
}
}
// targets
const targets = self.targets.filter(x => self.hasCurrent(x))
for (const target of targets) {
const fillers = target.querySelectorAll('.filler span:nth-child(1)')
for (const filler of fillers) {
gsap.to(filler, { width: 0, left: 0, duration: fillerTime, ease: fillerEase })
}
}
}
self.object.addEventListener('autopause.xt', eventAutopause)
// mousefollow
const mouseFollowObject = document.querySelector('.loader-mouse')
const mouseFollowContainer = object
let mouseFollow = new Xt.MouseFollow(mouseFollowObject, mouseFollowContainer, {
mouseCheck: () => {
return !mouseFollow.object.classList.contains('loader-disable') || mouseFollow.object.classList.contains('loader-js')
},
})
// unmount
const unmount = () => {
self.destroy()
self = null
mouseFollow.destroy()
mouseFollow = null
}
return unmount
},
})