-
Notifications
You must be signed in to change notification settings - Fork 17
/
furniture-listing-v1.js
43 lines (33 loc) · 1.22 KB
/
furniture-listing-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
import { Xt } from 'xtend-library'
import 'xtend-library/src/variables.js'
import gsap from 'gsap'
Xt.mount.push({
matches: '#iframe--furniture-listing-v1 body .block-listing_item', // add your own selector instead of body to contain the code
mount: object => {
// vars
const imgScale = 0.04
// enter
const eventEnter = e => {
const tr = e.target
// img
const img = tr.querySelector('.media-container')
gsap.to(img, { scale: 1 - imgScale, duration: Xt.vars.timeSmall, ease: 'expo.out' })
const imgInner = tr.querySelector('.media-inner')
gsap.to(imgInner, { scale: 1 + imgScale, duration: Xt.vars.timeSmall, ease: 'expo.out' })
}
object.addEventListener('mouseenter', eventEnter)
// leave
const eventLeave = e => {
const tr = e.target
// img
const img = tr.querySelector('.media-container')
gsap.to(img, { scale: 1, duration: Xt.vars.timeMedium, ease: 'expo.out' })
const imgInner = tr.querySelector('.media-inner')
gsap.to(imgInner, { scale: 1, duration: Xt.vars.timeMedium, ease: 'expo.out' })
}
object.addEventListener('mouseleave', eventLeave)
// unmount
const unmount = () => {}
return unmount
},
})