Mit GSAP kann man viel anstellen und im heutigen Video zeige ich euch wie man Buchstaben animieren kann. Damit kann auch sehr viel witziges machen, Buchstaben die sich bewegen und drehen oder ganz verschwinden.

Video

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://unpkg.com/split-type"></script>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
}

.wort0 {
    border: 1px solid #003b08;
    overflow-x: hidden;
    width: 50%;
    text-align: center;

}

Buchstabe kippen

const splitTypes = document.querySelectorAll(".wort");

splitTypes.forEach((char, i) => {
    const text = new SplitType(char, { types: "chars, words" });

gsap.to(".char", {rotation: 25, duration: 1, stagger: 0.2})
})

Buchstaben fallen runter

const splitTypes = document.querySelectorAll(".wort");

splitTypes.forEach((char, i) => {
    const text = new SplitType(char, { types: "chars, words" });

gsap.to(".char", {yPercent:100, duration: 1, stagger: 0.2})
})

Buchstabe fallen von li nach rechts

const splitTypes = document.querySelectorAll(".wort");

splitTypes.forEach((char, i) => {
    const text = new SplitType(char, { types: "chars, words" });

gsap.to(".char", {yPercent:100, duration: 1, stagger: {
        each: 0.1,
        from: "left"
    }})
})

Buchstabe fallen und kommen zurück

const splitTypes = document.querySelectorAll(".wort");

splitTypes.forEach((char, i) => {
    const text = new SplitType(char, { types: "chars, words" });

 gsap.to(".char", {yPercent:100, duration: 1, stagger: {
        each: 0.1,
        from: "center"
    },
    repeat: -1,
    yoyo: true})
})

Kombination aus allem

const splitTypes = document.querySelectorAll(".wort");

splitTypes.forEach((char, i) => {
    const text = new SplitType(char, { types: "chars, words" });

const tl = gsap.timeline({repeat: -1, yoyo: true})

    tl.to(".char",{
        yPercent: 100,
        duration: 1,
        stagger: {
            each: 0.1,
            from: "center"
        },
        autoAlpha: 0,
        ease: "steps(2)"
        // https://gsap.com/docs/v3/Eases/
    })
    .to(".char", {
        yPercent: 0,
        duration: 1,
        stagger: {
            each: 0.1,
            from:"edges"
        },
        autoAlpha: 1,
        ease: "bounce"
    })
})