-
Notifications
You must be signed in to change notification settings - Fork 15
/
brands-infinite-v1.js
102 lines (87 loc) · 2.89 KB
/
brands-infinite-v1.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
import { Xt } from 'xtend-library/src/xt.js'
import 'xtend-library/src/variables.js'
import 'xtend-library/src/extensions/slider/slider.js'
import gsap from 'gsap'
Xt.mount.push({
matches: '#iframe--brands-infinite-v1 body .slider', // add your own selector instead of body to contain the code
mount: object => {
// vars
const timeScaleTimeOn = Xt.vars.timeMedium
const timeScaleEaseOn = 'quint.in'
const timeScaleTimeOff = Xt.vars.timeBig
const timeScaleEaseOff = 'quint.out'
// slider
let self = new Xt.Slider(object, {
align: 'left',
groupMq: false,
autoHeight: false,
jump: false,
drag: {
manual: true,
wrap: true,
},
})
// on
const eventOn = e => {
const tr = e.target
// useCapture delegation
if (self.targets.includes(tr)) {
// time depending on target and dragger width
const slideWidth = tr.offsetWidth
const draggerWidth = self.dragger.offsetWidth
let time = slideWidth * 15 // constant speed
if (object.classList.contains('slider--factor')) {
time = (draggerWidth / slideWidth) * 50000 // faster or slower depending on horizontal space
}
// animate
if (self.initial) {
// reset dragging position
gsap.set(self.dragger, { x: 0 })
}
if (self.wrap) {
// end dragging position instant
gsap.set(self.dragger, { x: self.detail.dragPos })
} else {
// end dragging position
gsap.to(self.dragger, { x: self.detail.dragPos, duration: time, ease: 'linear' }).eventCallback('onComplete', () => {
// wrap before changing slide if needed, needed with drag.wrap = true
self.eventWrap()
requestAnimationFrame(() => {
// go to next slide
self.goToNext()
})
})
}
}
}
self.object.addEventListener('on.xt', eventOn, true)
// eventPause
const eventPause = e => {
// pause tween
const tweens = gsap.getTweensOf(self.dragger)
for (const tween of tweens) {
gsap.to(tween, { timeScale: 0, duration: timeScaleTimeOff, ease: timeScaleEaseOff })
}
}
self.object.addEventListener('mouseenter', eventPause, true)
addEventListener('blur', eventPause)
// eventResume
const eventResume = e => {
// resume tween
const tweens = gsap.getTweensOf(self.dragger)
for (const tween of tweens) {
gsap.to(tween, { timeScale: 1, duration: timeScaleTimeOn, ease: timeScaleEaseOn })
}
}
self.object.addEventListener('mouseleave', eventResume, true)
addEventListener('focus', eventResume)
// unmount
const unmount = () => {
removeEventListener('blur', eventPause)
removeEventListener('focus', eventResume)
self.destroy()
self = null
}
return unmount
},
})