Animation collection
Slimple animations to give life to your applications. for customize your own properties, click on the properties button and set it to "Custom" in the global controls, then you will can customize the duration, delay, timing function.
0.5s
0.0s
Try the different timing functions
ease-in-out
linear
duration: 1s
fade in
Simple fade in effect
blurred fade in
Fade in with blur
zoom in
Scale from 0.5 to 1
zoom out
Scale from 1.5 to 1
slide in top
Slide in from top
slide in bottom
Slide in from bottom
slide in left
Slide in from left
slide in right
Slide in from right
bounce
Infinite bounce
pulse
Infinite pulse
shake
Infinite shake
tada
Fun tada effect
Scroll Reveal Animations
Scroll and observe the animation reveal effect.
Fade + Blur
html
<div class="reveal">
<h2>Fade + Blur</h2>
<!-- Your content -->
</div>css
.animate-fade-in-blur {
animation: fade-in-blur 0.8s ease-out forwards;
}
@keyframes fade-in-blur {
0% {
opacity: 0;
filter: blur(10px);
}
100% {
opacity: 1;
filter: blur(0);
}
}
js
document.addEventListener("DOMContentLoaded", function() {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("fade-in-blur";
// for unobserve the element when is out from the view
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -50px 0px" }); // adjust to you need
reveals.forEach(el => observer.observe(el));
});
Scale In
html
<div class="reveal">
<h2>Scale In</h2>
<!-- Your content -->
</div>css
.animate-scale-in {
animation: scale-in 0.6s ease-out forwards;
}
@keyframes scale-in {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
js
document.addEventListener("DOMContentLoaded", function() {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("scale-in";
// for unobserve the element when is out from the view
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -50px 0px" }); // adjust to you need
reveals.forEach(el => observer.observe(el));
});
Slide from Left
html
<div class="reveal">
<h2>Slide from Left</h2>
<!-- Your content -->
</div>css
.animate-slide-in-left {
animation: slide-in-left 0.6s ease-out forwards;
}
@keyframes slide-in-left {
0% {
transform: translateX(-30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}js
document.addEventListener("DOMContentLoaded", function() {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("slide-in-left";
// for unobserve the element when is out from the view
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -50px 0px" }); // adjust to you need
reveals.forEach(el => observer.observe(el));
});
Slide from Right
html
<div class="reveal">
<h2>Slide from Right</h2>
<!-- Your content -->
</div>css
.animate-slide-in-right {
animation: slide-in-right 0.6s ease-out forwards;
}
@keyframes slide-in-right {
0% {
transform: translateX(30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
js
document.addEventListener("DOMContentLoaded", function() {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("slide-in-right";
// for unobserve the element when is out from the view
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -50px 0px" }); // adjust to you need
reveals.forEach(el => observer.observe(el));
});
Sequential animations
Hover on the grid to see the content loading in sequential order, you can configure the sequence: row, column, diagonal and both. Click in the properties button and set it to "Custom" to customize the animation, properties.
0.2s
0.0s