Bouncy type animation

bouncy-type-animation.markdown

Bouncy type animation

Bouncy type with TimelineLite

A Pen by J Scott Smith on CodePen.

License.

index.html

<h1 id="text">Bounce!</h1>

script.babel

// elements
const text = document.getElementById('text');
const input = document.getElementById('input');

// add spans
function addSpans(el, text) {
    let letters = text.split('');
    let html = '';
    for (var i = 0; i < letters.length; i++) { 
        html += '<span>' + letters[i] + '</span>';
    }
    el.innerHTML = html;
}
addSpans(text, text.innerText);

// setup timeline
const tl = new TimelineLite();
tl.staggerFromTo("#text span", 1.7, {
    y: -window.innerHeight / 2 - 100,
    x: -window.innerHeight / 2 - 100,
}, {
    y: 0,
    x: 0,
    ease: Bounce.easeOut,
}, 0.03, "stagger"); 

window.addEventListener('click', () => {
     tl.restart();
});

tl.play();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

style.scss

@import 'https://fonts.googleapis.com/css?family=Kanit:800i';

@mixin z-index($n: 1) {
    @for $i from 0 to $n {
        &:nth-child(#{$i + 1}) {
            z-index: $n - $i;
        }
    }
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F02D9A;
    cursor: pointer;
}

#text {
    text-transform: uppercase;
    // font-family: 'Futura', san-serif;
    font-family: 'Kanit', sans-serif;
    font-style: italic;
    font-size: 22vmin;
    color: transparent;
    
    span {
        color: white;
        display: inline-block;
        position: relative;
        @include z-index(7);
    }
}

span {
    text-shadow:-1px -1px 0 black, 
                -2px -2px 0 black,
                -3px -3px 0 black,
                -4px -4px 0 black,
                -5px -5px 0 black,
                -6px -6px 0 black,
                -7px -7px 0 black,
                -8px -8px 0 black,
                -9px -9px 0 black,
                -10px -10px 0 black, 
                -11px -11px 0 black, 
                -12px -12px 0 black,
                -13px -13px 0 black,
                -14px -14px 0 black,
                -15px -15px 0 black,
                -16px -16px 0 black,
                -17px -17px 0 black,
                -18px -18px 0 black,
                -19px -19px 0 black,
                -20px -20px 0 black, 
                -21px -21px 0 black, 
                -22px -22px 0 black,
                -23px -23px 0 black,
                -24px -24px 0 black,
                -25px -25px 0 black,
                -26px -26px 0 black,
                -27px -27px 0 black,
                -28px -28px 0 black,
                -29px -29px 0 black,
                -30px -30px 0 black, 
                -31px -31px 0 black, 
                -32px -32px 0 black,
                -33px -33px 0 black,
                -34px -34px 0 black,
                -35px -35px 0 black,
                -36px -36px 0 black,
                -37px -37px 0 black,
                -38px -38px 0 black,
                -39px -39px 0 black,
}

input {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}