-
Notifications
You must be signed in to change notification settings - Fork 15
/
ripple.js
49 lines (39 loc) · 1.35 KB
/
ripple.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
import { Xt } from 'xtend-library/src/xt.js'
import 'xtend-library/src/variables.js'
import 'xtend-library/src/addons/animation/ripple.js'
import gsap from 'gsap'
Xt.mount.push({
matches: '.demo--ripple-default .btn, .demo--ripple-default .card',
mount: object => {
// init
let self = new Xt.Ripple(object, {})
// on
const eventOn = e => {
const ripple = self.rippleContainer.querySelector('.ripple:last-child')
// animate
if (ripple) {
gsap.set(ripple, { height: self.size, width: self.size, top: self.top, left: self.left, scale: 1, opacity: 0 })
gsap.to(ripple, { opacity: 1, duration: Xt.vars.timeTiny, ease: 'quad.inOut' })
gsap.to(ripple, { scale: self.scaleFinal, duration: Xt.vars.timeSmall, ease: 'quad.inOut' })
}
}
object.addEventListener('ripple.on.xt', eventOn)
// off
const eventOff = e => {
const ripple = self.rippleContainer.querySelector('.ripple:last-child')
// animate
if (ripple) {
gsap.to(ripple, { opacity: 0, duration: Xt.vars.timeSmall, ease: 'quad.out', delay: Xt.vars.timeMini }).eventCallback('onComplete', () => {
ripple.remove()
})
}
}
object.addEventListener('ripple.off.xt', eventOff)
// unmount
const unmount = () => {
self.destroy()
self = null
}
return unmount
},
})