Bibliothèque d’animations WASP

<p class="texts-1-1-text split-text masked-text-letters">
    crafted animation framework and testing environment for designers and developers
</p>

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

    &-text {
        color: var(--text-main);
        font-size: 4rem;
        text-transform: uppercase;
        text-align: center;
        max-width: 96rem;
    }
}

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import CustomEase from "gsap/CustomEase";
import SplitText from "gsap/SplitText";

gsap.registerPlugin(SplitText, ScrollTrigger, CustomEase);

export function initializeMaskedTextLetters() {
    // Split text into words and characters to prevent word breaks
    const split = new SplitText(".masked-text-letters", { type: "words,chars" });
    const words = split.words;
    const chars = split.chars;

    // Ensure words stay together on one line
        words.forEach(word => {
        word.style.display = 'inline-block';
        word.style.whiteSpace = 'nowrap';
        word.style.wordBreak = 'keep-all';
        word.style.overflowWrap = 'normal';
        word.style.hyphens = 'none';
    });

    // Wrap each char in a clipping container
    chars.forEach(char => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'inline-block';
        wrapper.style.overflow = 'hidden';
        wrapper.style.visibility = 'hidden';
        char.parentNode.replaceChild(wrapper, char);
        wrapper.appendChild(char);
    });

    // Optionally refresh ScrollTrigger after DOM changes
    ScrollTrigger.refresh();

    // Define a custom ease
    CustomEase.create("customEase", "0.2, 0.6, 0.35, 1");

    // Animate each character
    gsap.fromTo(
        chars,
        {
            y: "110%"
        },
        {
            visibility: "visible",
            y: "0%",
            ease: "customEase",
            delay: 1.2,
            duration: 0.4,
            stagger: 0.01,
            yoyo: true,
            scrollTrigger: {
                trigger: ".masked-text-letters",
                start: "top bottom-=20%",
                markers: {startColor: "green", endColor: "transparent"},
                toggleActions: "play none none reverse",
                invalidateOnRefresh: true
            }
        }
    );
}

<p class="texts-1-2-text split-text masked-text-words">
    crafted animation framework and testing environment for designers and developers
</p>

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

    &-text {
        color: var(--text-main);
        font-size: 4rem;
        text-transform: uppercase;
        text-align: center;
        max-width: 96rem;
    }
}

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import CustomEase from "gsap/CustomEase";
import SplitText from "gsap/SplitText";

gsap.registerPlugin(SplitText, ScrollTrigger, CustomEase);

export function initializeMaskedTextWords() {
    // Split text into individual words using GSAP SplitText
    const splitWords = new SplitText(".masked-text-words", { type: "words" });

    // Array of word elements created by SplitText
    const rawWords = splitWords.words;

    // Wrap each word in a clipping container
    rawWords.forEach(word => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'inline-block';
        wrapper.style.overflow = 'hidden';
        wrapper.style.visibility = 'hidden';
        word.parentNode.replaceChild(wrapper, word);
        wrapper.appendChild(word);
    });

    // Refresh ScrollTrigger to account for new wrappers
    ScrollTrigger.refresh();

    // Define a custom ease
    CustomEase.create("customEase", "0.2, 0.6, 0.35, 1");

    // Animate each word with yoyo once on scroll trigger
    gsap.fromTo(
        rawWords,
        {
            y: "110%"
        },
        {
            visibility: "visible",
            y: "0%",
            ease: "customEase",
            delay: 1.2,
            duration: 0.7,
            stagger: 0.1,
            yoyo: true,
            scrollTrigger: {
                trigger: ".masked-text-words",
                start: "top bottom-=20%",
                markers: {startColor: "green", endColor: "transparent"},
                toggleActions: "play none none reverse",
                invalidateOnRefresh: true
            }
        }
    );
}

<p class="texts-1-3-text split-text masked-text-lines">
    crafted animation framework and testing environment for designers and developers
</p>

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

    &-text {
        color: var(--text-main);
        font-size: 4rem;
        text-transform: uppercase;
        text-align: center;
        max-width: 96rem;
    }
}

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import CustomEase from "gsap/CustomEase";
import SplitText from "gsap/SplitText";

gsap.registerPlugin(SplitText, ScrollTrigger, CustomEase);

export function initializeMaskedTextLines() {
    const splitLines = new SplitText(".masked-text-lines", { type: "lines" });

    // Array of line elements created by SplitText
    const rawLines = splitLines.lines;

    // Wrap each line in a clipping container
    rawLines.forEach(line => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'block';
        wrapper.style.overflow = 'hidden';
        wrapper.style.visibility = 'hidden';
        line.parentNode.replaceChild(wrapper, line);
        wrapper.appendChild(line);
    });

    // Refresh ScrollTrigger after wrapping
    ScrollTrigger.refresh();

    // Define a custom ease
    CustomEase.create("customEase", "0.2, 0.6, 0.35, 1");

    // Animate each line
    gsap.fromTo(
        rawLines,
        {
            y: "110%"
        },
        {
            visibility: "visible",
            y: "0%",
            ease: "customEase",
            delay: 2,
            duration: 1,
            stagger: 0.16,
            yoyo: true,
            scrollTrigger: {
                trigger: ".masked-text-lines",
                start: "top bottom-=20%",
                markers: {startColor: "green", endColor: "transparent"},
                toggleActions: "play none none reverse",
                invalidateOnRefresh: true
            }
        }
    );
}

<p class="texts-1-4-text opacity-text-letters">
Crafted animation framework and testing environment for designers and developers. Crafted animation framework and testing environment for designers and developers. Crafted animation framework and testing environment for designers and developers. Crafted animation framework and testing environment for designers and developers.
</p>

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

    &-text {
        color: var(--text-main);
        font-size: 2.25rem;
        line-height: 1.1;
        max-width: 96rem;
    }
}

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import SplitText from "gsap/SplitText";
console.log(ScrollTrigger);

gsap.registerPlugin(SplitText, ScrollTrigger);

export function initializeOpacityTextLetters() {
    const split = new SplitText(".opacity-text-letters", { type: "words,chars" });
    const words = split.words;
    const chars = split.chars;

    // Prevent words from breaking across lines
    words.forEach(word => {
        word.style.display = 'inline-block';
        word.style.whiteSpace = 'nowrap';
        word.style.wordBreak = 'keep-all';
        word.style.overflowWrap = 'normal';
        word.style.hyphens = 'none';
    });

    // Wrap each char in a clipping container
    chars.forEach(char => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'inline-block';
        wrapper.style.overflow = 'hidden';
        char.parentNode.replaceChild(wrapper, char);
        wrapper.appendChild(char);
    });

    // Recalculate ScrollTrigger positions after DOM changes
    ScrollTrigger.refresh();

    // Initialize starting states
    gsap.set(chars, {
        opacity: 0.1,
    });

    // Fade chars in on scroll scrub
    gsap.to(
        chars,
        {
            opacity: 1,
            ease: "none",
            stagger: 0.05,
            scrollTrigger: {
                trigger: ".opacity-text-letters",
                start: "top bottom-=20%",
                end: "bottom top+=50%",
                scrub: true,
                markers: {startColor: "green", endColor: "green"},
            },
        }
    );
}

<p class="texts-1-5-text split-text fade-text-words">
    crafted animation framework and testing environment for designers and developers
</p>

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

    &-text {
        color: var(--text-main);
        font-size: 4rem;
        text-transform: uppercase;
        text-align: center;
        max-width: 96rem;
    }
}

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import SplitText from "gsap/SplitText";

gsap.registerPlugin(SplitText, ScrollTrigger);

export function initializeMFadeTextWords() {
    // Split text into individual words using GSAP SplitText
    const splitWords = new SplitText(".fade-text-words", { type: "words" });

    // Array of word elements created by SplitText
    const rawWords = splitWords.words;

    // Wrap each word in a clipping container
    rawWords.forEach(word => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'inline-block';
        wrapper.style.overflow = 'hidden';
        wrapper.style.visibility = 'hidden';
        word.parentNode.replaceChild(wrapper, word);
        wrapper.appendChild(word);
    });

    // Refresh ScrollTrigger to account for new wrappers
    ScrollTrigger.refresh();

    // Animate each word with yoyo once on scroll trigger
    gsap.fromTo(
        rawWords,
        {
            x: "1em", opacity: 0
        },
        {
            visibility: "visible",
            x: "0px",
            opacity: 1,
            ease: "power3.out",
            delay: 2,
            duration: 0.8,
            stagger: 0.06,
            yoyo: true,
            scrollTrigger: {
                trigger: ".fade-text-words",
                start: "top bottom-=20%",
                markers: {startColor: "green", endColor: "transparent"},
                toggleActions: "play none none reverse",
                invalidateOnRefresh: true
            }
        }
    );
}