You are currently viewing Play Animation & Transitions when in view – JS – Elementor

Play Animation & Transitions when in view – JS – Elementor

(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

  1. Add “dm-view” CSS class to the elements that have animations/transitions needed to play in view.
  2. 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.
  3. The Javascript code works by adding .animate to your element’s CSS when it is in viewport and removes .animate when out of viewport.
  4. 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 {‘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*/

  animation: fade-scale 2s ease forwards;

@keyframes fade-scale {
    0% {
    100% {

/*CSS Transition Version*/

.flower-icon2 {
    opacity: 0;
    transition: 1s;
    scale: 0;

   scale: 1;
   opacity: 1;


    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
                    } else {
                        // Remove the CSS class if the element moves outside the viewport

            // Start observing the element


Leave a Reply