How to activate animation when the content scrolls into view

Question

I use animate.css and want to activate animation when the content scrolls into view. How can I implement this ? Here is an example :

<div class="services__content">
            <div class="services__img animated fadeInLeft">
                <div class="relative">
                    <img src="images/png/services-laptop.png" alt="" class="services__img-relative">
                </div>
            </div>
            <div class="services__content-text aminated fadeInRight">
                <h3>Web Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.</p>
                <a href="#" class="btn btn--orange hov-up">View more</a>
            </div>
        </div>

I attached classes animated fadeInRight but they work automaticaly when I relode the page. It can't, for instance, start an animation programatically as when an element is visible int the viewport, for this you have Javascript. But how can I implement this?

Answer 1

 function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; // Only completely visible elements return true: var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); // Partially visible elements return true: //isVisible = elemTop < window.innerHeight && elemBottom >= 0; return isVisible; } function toggleAnimationProCon(element){ let elementtoAnimate= document.getElementsByClassName(element)[0]; if(isScrolledIntoView(elementtoAnimate)){ prosdiv.classList.add("class"); consdiv.classList.add("class"); }else{ prosdiv.classList.remove("class"); consdiv.classList.remove("class"); } } 

attach this method to "scroll" event , it will help to find weather the element is visible in the view or not . if visible perform your action . I would suggest have a look into _.throttle method too for attaching a event to scroll , it will be helpfull