Donut chart trigger animation on scroll

Question

I found this donut chart animation and was wondering how to trigger the animation on scroll?

$(document).ready(function() {
  $('#circle-1').circliful();
  $('#circle-2').circliful();
  $('#circle-3').circliful();
});

body {
  font-family: helvetica;
  font-weight: 100;
  background: white;
  text-align: center;
  padding: 1em;
}
.circle {
  margin: 0 auto;
  display: inline-block;
  margin-right: 1em;
}

<link href="//rawgit.com/pguso/jquery-plugin-circliful/master/css/jquery.circliful.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.js"></script>

<div id="circle-1" class="circle" data-dimension="150" data-text="85%" data-info="Sweet" data-width="15" data-fontsize="24" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>
<div id="circle-2" class="circle" data-dimension="150" data-text="30%" data-info="Terrible" data-width="15" data-fontsize="24" data-percent="30" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="30"></div>
<div id="circle-3" class="circle" data-dimension="150" data-text="100%" data-info="Drunk" data-width="15" data-fontsize="24" data-percent="100" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="100"></div>

View on Codepen

Do you mean ["on scroll"](http://stackoverflow.com/questions/5477338/execute-function-on-scroll-jquery) or [when then elements are scrolled into view](http://stackoverflow.com/questions/20827523/how-to-determine-when-an-html5-element-has-been-viewed)? — showdev, Jun 01 '15 at 23:07
Since you are using jQuery I think Waypoints is the way to go. http://imakewebthings.com/waypoints/ — zJorge, Sep 09 '16 at 22:39

score 0 · Answer 1 · answered Jul 07 '20 at 11:28

It can be done using GSAP. You can take a reference from this code on - https://codepen.io/pranavraghaw1/pen/VweMWoz

const tl = gsap.timeline({paused: true});

tl.from(
    ".gsap-swipe",
    {
      y: 20,
      x: 20,
      rotate: -40,
      duration: 3,
      transformOrigin: '30% 80%',
      ease: Elastic.easeOut.config(1, 0.5),
    }, 0
  )
  .fromTo(
    ".swipe",
    {
      xPercent: -100
    },
    {
      duration: 1,
      xPercent: 100,
      ease: Sine.easeInOut,
      stagger: {
        each: 0.15
      }
    }, 0
  )
  .from(
    ".maskSwipe",
    {
      xPercent: -100,
      ease: Sine.easeInOut
    },
    0.4
  )
  .from(
    "#hello",
    {
      duration: 1.5,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".swoop",
    {
      duration: 2,
      drawSVG: "0%"
    },
    1
  )
  .from(
    ".line",
    {
      drawSVG: "0%",
      duration: 0.5,
      stagger: {
        each: 0.2
      }
    },
    1
  )
  .from(
    ".shape",
    {
      scale: 0,
      duration: 1.3,
      transformOrigin: "50% 50%",
      rotate: '+=random(-60, 60)',
      ease: Elastic.easeOut.config(1, 0.8),
      stagger: {
        each: 0.2
      }
    },
    0.2
  );

// ScrubGSAPTimeline(tl);

let hover = document.querySelector('.js-hover');

hover.addEventListener('mouseover', playTl);
hover.addEventListener('mouseout', resetTl);

function playTl(){
  tl.timeScale(1.25).restart();
}

function resetTl(){
  tl.progress(0).pause();
}

Donut chart trigger animation on scroll

1 Answers1