0

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?

JKawa
  • 179
  • 2
  • 6
  • 20
  • 1
    The accepted answer: https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery – Heather Chloe Jan 12 '19 at 22:44
  • This is excellent!! I'm new to jQuery and didn't know bout the $(window).scroll function. Thanks! – JKawa Jan 13 '19 at 22:14

1 Answers1

1

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/

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • This seems like a really good solution but I've been trying to write the code and play around with it for the past 1.5h with no success. From what I read so far and if I understand correctly, the Intersection Observer API work with CSS animations. Am I right? If that's the case, this won't work because the animations in the Easy Pie Chart code are done through jQuery. – JKawa Jan 13 '19 at 21:55
  • 1
    That's not correct. You can call/do whatever you'd like when the entry is intersected. Instead of adding a CSS class, as in my example, you could execute the `$('.chart').easyPieChart({});` – Andy Hoffman Jan 13 '19 at 23:53