Skip to content

Instantly share code, notes, and snippets.

@jackabox
Created December 12, 2019 00:58
Show Gist options
  • Save jackabox/783d49abe05f9f574016e6eea06a0c2b to your computer and use it in GitHub Desktop.
Save jackabox/783d49abe05f9f574016e6eea06a0c2b to your computer and use it in GitHub Desktop.
Animation
@keyframes slide-up {
0% {
transform: translateY(100%);
opacity: 0;
}
50% {
transform: translateY(-10%);
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
/****************
FADES
*****************/
[data-animate^='fade'] {
opacity: 0;
transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-property: opacity, transform;
transition-duration: 0.75s;
}
[data-animate^='fade'].animate {
opacity: 1;
transform: translate(0, 0);
}
[data-animate='fade-up'] {
transform: translateY(50px);
}
[data-animate='fade-down'] {
transform: translateY(-50px);
}
[data-animate='slide-up'] {
/* positioning */
transform: translateY(100%);
/* visual */
opacity: 0;
}
[data-animate='slide-up'].animate {
/* animation */
animation: slide-up 0.9s cubic-bezier(0.47, 0.13, 0.46, 0.97) forwards;
}
class ScrollAnimations {
constructor() {
this.elements = document.querySelectorAll('[data-animate]')
if (!isNull(this.elements)) {
this.init()
}
}
init() {
enterView({
selector: this.elements,
enter: el => {
if (el.hasAttribute('data-delay')) {
el.style.transitionDelay = `${el.getAttribute('data-delay')}ms`
}
el.classList.add('animate')
},
offset: 0.1,
once: true
})
}
}
new ScrollAnimations()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment