Skip to content

Instantly share code, notes, and snippets.

@chrisle
Created January 9, 2022 02:35
Show Gist options
  • Save chrisle/34ac7a9b333eb6a313f110373ab81de5 to your computer and use it in GitHub Desktop.
Save chrisle/34ac7a9b333eb6a313f110373ab81de5 to your computer and use it in GitHub Desktop.
Bouncy type animation
<h1 id="text">hello</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="https://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);
}
}
@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%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment