https://webkontorka.ru/demo-module/modules/mod_mx_suppernews/assets/js/fx10.js

1
2export class Fx10 {
3    DOM = {
4        el: null,
5        bottom: null,
6        top: null
7    }
8    constructor(DOM_el) {
9        this.DOM.el = DOM_el;
10        this.layout();
11    }
12    layout() {
13        /*
14        this
15        <div class="double" style="background-image:[url]"></div>
16
17        becomes
18        <div class="double">
19            <div class="double__img" style="background-image:[url]"></div>
20            <div class="double__img" style="background-image:[url]"></div>
21        </div>
22        */
23        
24        // get element background-image url
25        const url = getComputedStyle(this.DOM.el).backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];
26        gsap.set(this.DOM.el, {backgroundImage: 'none'});
27
28        const iterations = 5;
29        let innerHTML = '';
30        for (let i = 0; i < iterations; ++i) {
31            innerHTML += `<div class="double__img" style="background-image:url(${url})"></div>`;
32        }
33        this.DOM.el.innerHTML = innerHTML;
34        this.DOM.images = [...this.DOM.el.querySelectorAll('.double__img')];
35
36        gsap.set(this.DOM.images[0], {
37            scale: 1.3,
38            filter: 'saturate(200%)'
39        })
40    }
41    mouseenter() {
42
43        if ( this.leaveTimeout ) {
44            this.leaveTimeout.kill();
45        }
46
47        this.enterTimeout = gsap.timeline({
48            defaults: {
49                duration: 0.5,
50                ease: 'power3',
51            },
52        })
53        .set(this.DOM.images, {willChange: 'clip-path'})
54        .fromTo(this.DOM.images[1], {
55            clipPath: 'polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%)',
56        }, {
57            duration: 1,
58            ease: 'expo',
59            clipPath: 'polygon(100% 50%, 100% 50%, 100% 100%, 100% 100%)'
60        }, 0.6)
61        .fromTo(this.DOM.images[2], {
62            clipPath: 'polygon(0% 50%, 50% 50%, 50% 100%, 0% 100%)',
63        }, {
64            clipPath: 'polygon(0% 100%, 50% 100%, 50% 100%, 0% 100%)'
65        }, 0.4)
66        .fromTo(this.DOM.images[3], {
67            clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%)',
68        }, {
69            clipPath: 'polygon(50% 50%, 100% 50%, 100% 50%, 50% 50%)'
70        }, 0)
71        .fromTo(this.DOM.images[4], {
72            clipPath: 'polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%)',
73        }, {
74            clipPath: 'polygon(0% 0%, 0% 0%, 0% 50%, 0% 50%)'
75        }, 0.2)
76
77    }
78    mouseleave() {
79        
80        if ( this.enterTimeout ) {
81            this.enterTimeout.kill();
82        }
83
84        this.leaveTimeout = gsap.timeline({
85            defaults: {
86                duration: 0.4,
87                ease: 'power3',
88            },
89        })
90        .set(this.DOM.images, {willChange: 'clip-path'})
91        .to(this.DOM.images[1], {
92            clipPath: 'polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%)',
93        }, 0)
94        .to(this.DOM.images[2], {
95            clipPath: 'polygon(0% 50%, 50% 50%, 50% 100%, 0% 100%)',
96        }, 0.2)
97        .to(this.DOM.images[3], {
98            clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%)',
99        }, 0.6)
100        .to(this.DOM.images[4], {
101            clipPath: 'polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%)',
102        }, 0.4)
103
104    }
105}