Bibliothèque d’animations WASP

<div class="gallery">
    
    <div class="gallery-col col col-1">
        <div class="gallery-img">
            <img src="public/images/parallax-image.png" alt="Gallery image 1">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-2.png" alt="Gallery image 2">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-3.png" alt="Gallery image 3">
        </div>
        <div class="gallery-img">
            <img src="public/images/image-4.png" alt="Gallery image 4">
        </div>
    </div>
    
    <div class="gallery-col col col-2">
        <div class="gallery-img">
            <img src="public/images/parallax-image.png" alt="Gallery image 5">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-2.png" alt="Gallery image 6">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-3.png" alt="Gallery image 7">
        </div>
        <div class="gallery-img">
            <img src="public/images/image-4.png" alt="Gallery image 8">
        </div>
    </div>
    
    <div class="gallery-col col col-3">
        <div class="gallery-img">
            <img src="public/images/parallax-image.png" alt="Gallery image 9">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-2.png" alt="Gallery image 10">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-3.png" alt="Gallery image 11">
        </div>
        <div class="gallery-img">
            <img src="public/images/image-4.png" alt="Gallery image 12">
        </div>
    </div>
    
    <div class="gallery-col col col-4">
        <div class="gallery-img">
            <img src="public/images/parallax-image.png" alt="Gallery image 13">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-2.png" alt="Gallery image 14">
        </div>
        <div class="gallery-img">
            <img src="public/images/parallax-image-3.png" alt="Gallery image 15">
        </div>
        <div class="gallery-img">
            <img src="public/images/image-4.png" alt="Gallery image 16">
        </div>
    </div>
</div>

.blocks-3-1 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

// Gallery styles
.gallery {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 0 32px;
    height: 160vh;
    overflow: hidden;
    width: 100%;
    max-width: none;
    min-width: 0px;
    min-height: 0px;
    max-height: none;
}


.gallery-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%;
    height: auto;
    min-width: 250px;
    min-height: 0px;
    max-width: none;
    max-height: none;
    overflow: hidden;
    position: relative;
    will-change: transform;
    
    &.col-1 {
        top: -20%;
    }
    
    &.col-2 {
        top: -40%;
    }
    
    &.col-3 {
        top: -15%;
    }
    
    &.col-4 {
        top: -50%;
    }
}

.gallery-img {
    height: 100%;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 2 / 3;

    
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function initializeGalleryParallax() {
    const gallery = document.querySelector(".gallery");

    if (!gallery) return;

    const cols = [
        { el: document.querySelector(".col-1"), speed: 1.5 },
        { el: document.querySelector(".col-2"), speed: 2.0 },
        { el: document.querySelector(".col-3"), speed: 1.0 },
        { el: document.querySelector(".col-4"), speed: 2.5 }
    ];

    let ticking = false;

    const updateScroll = () => {
        const rect = gallery.getBoundingClientRect();
        const scrollProgress = Math.min(
            Math.max((window.innerHeight - rect.top) / (window.innerHeight + rect.height), 0),
            1
        );

        cols.forEach(({ el, speed }) => {
            if (el) {
                // parallax
                const movement = scrollProgress * window.innerHeight * speed * 0.5;
                el.style.transform = `translateY(${movement}px)`;
            }
        });

        ticking = false;
    };

    const onScroll = () => {
        if (!ticking) {
            requestAnimationFrame(updateScroll);
            ticking = true;
        }
    };

    window.addEventListener("scroll", onScroll, { passive: true });

    // initial call
    updateScroll();
}

<div class="stacked-cards-container">
    <div class="card-container">
        <div class="card" style="background-color: #f8f9fa;">
            <h2>Panel 1</h2>
        </div>
    </div>
    
    <div class="card-container">
        <div class="card" style="background-color: #e9ecef;">
            <h2>Panel 2</h2>
        </div>
    </div>
    
    <div class="card-container">
        <div class="card" style="background-color: #dee2e6;">
            <h2>Panel 3</h2>
        </div>
    </div>
    
    <div class="card-container">
        <div class="card" style="background-color: #ced4da;">
            <h2>Panel 4</h2>
        </div>
    </div>
</div>

.blocks-3-2 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.stacked-cards-container {
    height: 400vh; // 4 cards × 100vh donc 5 cards = 500vh
    position: relative;
}

.card-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0px;
    
    .card {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 0;
        height: 500px;
        width: 1000px;
        border-radius: 0;
        padding: 0;
        transform-origin: center;
        
        h2 {
            text-align: center;
            margin: 0;
            font-size: 48px;
            color: #333;
            font-weight: 300;
            letter-spacing: 2px;
        }
    }
}

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function initializeHorizontalScroll() {
    const container = document.querySelector(".stacked-cards-container");
    const cards = gsap.utils.toArray(".card");

    if (!container || cards.length === 0) {
        console.log("Éléments de cartes empilées introuvables");
        return;
    }

    console.log("Trouvé", cards.length, "cartes");

    ScrollTrigger.getAll().forEach(t => t.kill());

    // progress scroll
    const scrollProgress = ScrollTrigger.create({
        trigger: container,
        start: "top top",
        end: "bottom bottom",
        scrub: 1,
        onUpdate: (self) => {
            const progress = self.progress;

            cards.forEach((card, index) => {
                const cardContainer = card.closest('.card-container');
                const cardIndex = cards.indexOf(card);

                const baseScale = 0.85 + (cardIndex * 0.05);
                const targetScale = baseScale + 0.15;

                const startRange = cardIndex * 0.25;
                const endRange = Math.min(startRange + 0.25, 1);

                // mapping
                const cardProgress = Math.max(0, Math.min(1, (progress - startRange) / (endRange - startRange)));

                // le scale effect
                const currentScale = gsap.utils.interpolate(baseScale, targetScale, cardProgress);

                const yOffset = cardIndex * 25;

                gsap.set(card, {
                    scale: currentScale,
                    y: yOffset,
                    zIndex: cards.length - cardIndex
                });
            });
        }
    });

    // refresh
    ScrollTrigger.refresh();
}