Trigger CSS Animations in JavaScript

Question

I don\'t know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.

I need to call/trigger CSS Animation when the user scrol

Answer 1

You could use CSS to hide the image / animation and show when the user scrolls. This would work like this:

CSS:

div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}

#demo{
    display: none;
}

HTML:

Your javascript just needs to include an eventListener to call the function which triggers the display of your animation.

JS:

document.getElementById("myDIV").addEventListener("scroll", start);

function start() {
    document.getElementById('demo').style.display='block';
}