Bouncy type animation

bouncy-type-animation.markdown

Bouncy type animation

Bouncy type with TimelineLite

A Pen by Chris Le on CodePen.

License.

index.html

<h1 id="text">hello</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="https://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);
    }
}

@mixin extrude($depth: 16, $color: black) {
    $shadow: ();
    @for $i from 0 to $depth {
        $shadow: append($shadow, #{-$i + px} #{-$i + px} 0 $color, comma);
    }
    text-shadow: $shadow;
}

span {
    @include extrude(35, black);
}

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