https://okappi.be/wp-content/themes/custom/js/animation/team-hero.js?ver=7.1.3

1document.addEventListener("DOMContentLoaded", () => {
2    gsap.registerPlugin(ScrollTrigger);
3    const hero = document.querySelector(".tp-team-hero");
4    if (!hero) return;
5    const cards = gsap.utils.toArray(".card-team-picture");
6    if (!cards.length) return;
7    const mm = gsap.matchMedia();
8
9    const cardWidth = cards[0].offsetWidth;
10    let spread = cardWidth * 0.55;
11    mm.add("(min-width: 1024px)", () => {
12        spread = cardWidth * 0.65;
13    });
14    mm.add("(min-width: 1200px)", () => {
15        spread = cardWidth * 0.75;
16    });
17
18
19    cards.forEach((card, i) => {
20        const middle = (cards.length - 1) / 2;
21        const x = (i - middle) * spread;
22        const y = i % 2 === 0
23            ? gsap.utils.random(-30, -10)
24            : gsap.utils.random(10, 30);
25        const rot = gsap.utils.random(-8, 8);
26        card.dataset.startX = x;
27        card.dataset.startY = y;
28        card.dataset.rot = rot;
29        gsap.set(card, {
30            x,
31            y,
32            rotation: rot,
33            opacity:0,
34            scale:0.8
35        });
36    });
37
38    gsap.to(cards, {
39        opacity:1,
40        scale:1,
41        duration:1,
42        stagger:{
43            each:0.1,
44            from:"center"
45        },
46        ease:"back.out(1.4)"
47    });
48
49    ScrollTrigger.create({
50        trigger:hero,
51        start:"top top",
52        end:"bottom top",
53        scrub:1,
54        onUpdate(self){
55            const progress = self.progress;
56            cards.forEach((card,i)=>{
57                const direction = i < cards.length / 2 ? -1 : 1;
58                const distance = Math.abs(i - (cards.length - 1) / 2);
59                gsap.set(card, {
60                    x:
61                        Number(card.dataset.startX) +
62                        direction *
63                        distance *
64                        card.offsetWidth *
65                        0.9 *
66                        progress,
67                    y:
68                        Number(card.dataset.startY) -
69                        distance *
70                        card.offsetWidth *
71                        0.25 *
72                        progress,
73                    rotation:
74                        Number(card.dataset.rot) +
75                        direction *
76                        distance *
77                        8 *
78                        progress
79                });
80            });
81        }
82    });
83});