(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Support by getting –
1 – Elementor Pro
Video Coming Soon.
JS code to play CSS animation or CSS transition when in view
- Add “dm-view” CSS class to the elements that have animations/transitions needed to play in view.
- Now add .animate to CSS which would contain the animation/transition values. Example: if “.flower” is my element’s CSS class, then create “.flower.animate” and add new transition values or animation in it.
- The Javascript code works by adding .animate to your element’s CSS when it is in viewport and removes .animate when out of viewport.
- If you wish to not remove .animate when out of viewport so that the animation only plays once, you can remove “else” condition from javascript. i.e Remove this code -> else { entry.target.classList.remove(‘animate’);}
CSS animation
CSS transition
Plays only once
<div class="flower dmview"> Add your animated stuff here </div>
<div class="flower2 dmview">Add your animated stuff here</div>
/*Make sure to add extra "dm-view" class to element that needs animation in view*/
.flower-icon {
opacity: 0;
transition: 1s;
}
/*You can add CSS animation or CSS transitions below and it will work for both*/
.flower-icon.animate{
animation: fade-scale 2s ease forwards;
}
@keyframes fade-scale {
0% {
scale:0;
opacity:0;
}
100% {
scale:1;
opacity:1;
}
}
/*CSS Transition Version*/
.flower-icon2 {
opacity: 0;
transition: 1s;
scale: 0;
}
.flower-icon2.animate{
scale: 1;
opacity: 1;
}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select all elements with the class 'dm-view'
const dmViews = document.querySelectorAll('.dm-view');
// Loop through each element and attach the Intersection Observer
dmViews.forEach(dmView => {
// Create a new IntersectionObserver instance for each element
const observer = new IntersectionObserver((entries) => {
// For each entry (element)
entries.forEach(entry => {
// If the element is in the viewport
if (entry.isIntersecting) {
// Add a CSS class to trigger the animation
entry.target.classList.add('animate');
} else {
// Remove the CSS class if the element moves outside the viewport
entry.target.classList.remove('animate');
}
});
});
// Start observing the element
observer.observe(dmView);
});
});
</script>
