CODEWITHSUNDEEP
cssanimationscrollcss-animations
Rachel
Rachel

Reputation: 47

How to make an animation trigger each time the page is scrolled?

I have a very sublet keyframe animation. I'd like for it to play every single time the page has been scrolled - not just once when coming in the viewpoint. Each time the scroll is touched. All I can find is running once in viewport - which is fine, but it needs to play every time the scroll is touched in the viewport. Any ideas?

/* CSS */
.aha-section .pixels .light {
    margin-top: 4px;
    margin-left: 33px;
    animation: slide 2s 1;
}

@keyframes slide {
    from {
        margin-left: 33px;
    }
    50% {
        margin-left: 45px;
    }
    to {
        margin-left: 33px;
    }
}

Upvotes: 1

Views: 1020

Answers (1)

caiovisk
caiovisk

Reputation: 3809

You will need to use some JavaScript... then you will listen to the scroll event to do the desired function...

To trigger a animation set a class to it:

.scrolled .aha-section .pixels .light {
    animation: slide 2s 1;
}

and let the javascript add this class when the event scroll happens:

document.body.className += ' scrolled';

hope it helps to show you the direction.

let animated = false;

window.addEventListener("scroll", (event) => {
    animateOnScroll();
});

function animateOnScroll(){
  if(animated == false){
    animated = !animated;
    document.body.className += ' scrolled';  
    setTimeout(function() {
        animated = false;
        document.body.classList.remove('scrolled');
    }, 2000); //match whatever time set on css animation 
  }
}
.aha-section {
  position: fixed;
}
.aha-section .pixels .light {
    margin-top: 4px;
    margin-left: 33px;
}

.scrolled .aha-section .pixels .light {
    animation: slide 2s 1;
}

@keyframes slide {
    from {
        margin-left: 33px;
    }
    50% {
        margin-left: 45px;
    }
    to {
        margin-left: 33px;
    }
}

.scroll-emulator {
  height: 2500px;
}
<div class="aha-section">
    <div class="pixels">
        <div class="light">Light</div>
    </div>
</div>
<div class="scroll-emulator"><div>

Upvotes: 1

Related Questions