Bibliothèque d’animations WASP

<div class="images-2-1__parallax-container parallax-container">
    <img class="images-2-1__parallax-image" src="public/images/parallax-image.png" alt="Parallax Image Example" />
</div>

.images-2-1 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 4rem;
    padding-bottom: 4rem;

    &__parallax-container {
        position: relative;
        width: 100%;
        max-width: 24rem;
        aspect-ratio: 3 / 4;
        background-color: #1a73e8;
        overflow: hidden;
    }

    &__parallax-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

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

gsap.registerPlugin(ScrollTrigger);

export function initializeImageParallax() {
    document.querySelectorAll('.parallax-container').forEach(container => {
        const img = container.querySelector('img');
        img.style.scale = container.style.scale || '1.1';

        gsap.fromTo(
            img,
            {
                yPercent: -10
            },
            {
                yPercent: 10,
                ease: 'none',
                scrollTrigger: {
                    trigger: container,
                    start: 'top bottom',
                    end:   'bottom top',
                    scrub: true,
                    markers: true,
                },
            }
        );
    });
}

<div class="images-2-2__parallax-container parallax-scale-container">
    <img class="images-2-2__parallax-image" src="public/images/parallax-image-2.png" alt="Parallax Image Example" />
</div>

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

    &__parallax-container {
        position: relative;
        width: 100%;
        max-width: 24rem;
        aspect-ratio: 3 / 4;
        background-color: #1a73e8;
        overflow: hidden;
    }

    &__parallax-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform-origin: center center;
    }
}

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

gsap.registerPlugin(ScrollTrigger);

export function initializeImageParallaxScale() {
    document.querySelectorAll('.parallax-scale-container').forEach(container => {
        const img = container.querySelector('img');

        gsap.fromTo(
            img,
            {
                scale: 1
            },
            {
                scale: 1.2,
                ease: 'power1.out',
                scrollTrigger: {
                    trigger: container,
                    start: 'top bottom',
                    end:   'bottom center',
                    scrub: true,
                    markers: true,
                },
            }
        );
    });
}

<div id="parallax-zoom-wrapper" class="images-2-3__sticky-container">
    <div id="parallax-zoom-container" class="images-2-3__zoom-container">

        <div class="images-2-3__image-overlay images-2-3__image-overlay--right">
            <img class="images-2-3__image" src="public/images/parallax-image-3.png" />
        </div>

        <div class="images-2-3__image-overlay images-2-3__image-overlay--left">
            <img class="images-2-3__image" src="public/images/parallax-image-3.png" />
        </div>

        <div class="images-2-3__main-image-container">
            <img class="images-2-3__main-image parallax-zoom-image" src="public/images/parallax-image-3.png" alt="Parallax Image Example" />
        </div>

    </div>
</div>

.images-2-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 200vh;

    &__sticky-container {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__zoom-container {
        position: relative;
        width: 100%;
    }

    &__image-overlay {
        position: absolute;
        width: 12vw;
        height: 16vw;
        overflow: hidden;
        transform-origin: center;
        background-color: #94a3b8;

        &--right {
            right: 40vw;
            bottom: 20vh;
        }

        &--left {
            left: 40vw;
            top: 20vh;
        }

        .block-2-3__image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &__main-image-container {
        position: relative;
        width: 34vw;
        height: 34vh;
        overflow: hidden;
        transform-origin: center;

        .block-2-3__main-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
}

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

gsap.registerPlugin(ScrollTrigger);

export function initializeZoomParallax() {
    // GSAP Zoom-Parallax
    const wrapper = document.getElementById('parallax-zoom-wrapper');
    const container = document.getElementById('parallax-zoom-container');
    const image = document.getElementsByClassName('parallax-zoom-image');

    if (container && image) {
        gsap.to(
            container,
            {
                scale: 2.5,
                ease: 'power1.out',
                scrollTrigger: {
                    trigger: wrapper,
                    start: 'bottom bottom',
                    end: 'bottom top',
                    scrub: true
                }
            }
        );

        gsap.fromTo(
            image, 
            {
                scale: 1.3
            }, 
            { 
                scale: 1,
                ease: 'power3.out',
                scrollTrigger: {
                    trigger: wrapper,
                    start: 'bottom-=2% bottom',
                    end: 'bottom top',
                    markers: {startColor: "blue", endColor: "blue"},
                    toggleActions: "play none none reverse",
                    invalidateOnRefresh: true,
                    scrub: true
                }
            }
        );
    }
}

<div class="images-2-4__blur-container image-blur-container">
    <img class="images-2-4__image" src="public/images/image-4.png" alt="Image Example" />
</div>

.images-2-4 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &__blur-container {
        width: 100%;
        max-width: 24rem;
        aspect-ratio: 3 / 4;
        background-color: #1a73e8;
        overflow: hidden;
        position: relative;
    }

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

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

gsap.registerPlugin(ScrollTrigger);

export function initializeImageBlurReveal() {
    document.querySelectorAll('.image-blur-container').forEach(container => {
        const img = container.querySelector('img');

        ScrollTrigger.refresh();

        gsap.fromTo(
            img,
            {
                filter: 'blur(2rem)',
                scale: 1.3
            },
            {
                filter: 'blur(0rem)',
                scale: 1,
                ease: "power2.out",
                delay: 1.2,
                duration: 1.2,
                stagger: 0.1,
                yoyo: true,
                scrollTrigger: {
                    trigger: container,
                    start: 'top bottom',
                    markers: {
                        startColor: "green",
                        endColor: "orange"
                    },
                    end: 'bottom top',
                    toggleActions: "play none none reverse",
                    invalidateOnRefresh: true
                }
            }
        );
    });
}