CODEWITHSUNDEEP
javascripthtmlcss
JKawa
JKawa

Reputation: 179

Trigger a js animation when the page is scrolled to the section

I am using a the easy Pie Chart plugin from rendro (https://rendro.github.io/easy-pie-chart/). Basically I only want the animation to happen only when I scroll to the specific area on the page in which the chart is displayed. How can I achieve this?

Upvotes: 0

Views: 80

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19111

Please consider using Intersection Observer.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Pros:

  • No need to add scroll listener, debounce function.
  • Code is much clearer and smaller.

Cons:

  • Support is lacking in Safari, so you'll need to add a polyfill.

function handler(entries, observer) {
  for (entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add('inView');
    }
  }
}
let observer = new IntersectionObserver(handler);
observer.observe(document.querySelector(".takeAction"));
.takeAction {
  background-color: #fff;
  transition: 3s background-color;
}

.takeAction.inView {
  background-color: yellow;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p class="takeAction">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>

http://jsfiddle.net/30unpcLm/2/

Upvotes: 1

Related Questions