Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bouncy type animation
<h1 id="text">Bounce!</h1>
// 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();
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
@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%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.