Start on scroll

by tikosar

HTML

<script src="https://unpkg.com/js-circle-progress/dist/circle-progress.min.js" type="module"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil possimus aut vel, beatae fugit pariatur odio, placeat nostrum molestiae, tenetur quos error eum laboriosam incidunt dolor iusto dignissimos quisquam minima!</p>
<p>Tempore, quo totam ipsum, unde voluptate eligendi enim ea cum dolor, error, sint minus dolorem perspiciatis cumque placeat molestiae! Dolorem expedita ipsam libero fugit ad eum, cum suscipit doloremque dolor.</p>
<p>Quae modi ipsam veritatis atque architecto, eum assumenda dolore officia deserunt, neque id nobis nemo consequuntur totam nihil quidem exercitationem a possimus saepe quas similique debitis non. Facere, dolorum, officiis.</p>
<p>Porro impedit possimus perferendis voluptatibus, ipsum commodi nobis ratione dicta deserunt non harum unde fugit deleniti facere maiores cum aperiam quo dolor sapiente molestias dolorum, accusamus odit temporibus tempore quae.</p>
<p>Odio tenetur natus placeat facere dolorem eos, nulla laborum voluptatibus velit expedita tempore, fugiat a rem dolor cum quis sed repudiandae distinctio ex adipisci dolore sit! Hic at expedita suscipit.</p>
<p>Aspernatur libero numquam asperiores officiis sint, aliquid, vero, sit enim sed at, odit! Voluptatibus dolorum veniam sunt maxime, eligendi fugit totam inventore numquam necessitatibus quis praesentium iusto dolor dignissimos impedit.</p>
<p>Praesentium repellendus, consequuntur cum voluptate dignissimos vitae eaque earum culpa beatae placeat rerum corporis maxime neque iste distinctio consequatur nesciunt ducimus deserunt quasi. Ea incidunt repudiandae deserunt, excepturi, omnis consequatur.</p>
<p>Soluta aliquid cum nesciunt ipsum, est eveniet voluptatem aliquam, natus unde esse, tempore beatae quod incidunt nam consequatur nihil nobis dolore? Explicabo, id delectus quae commodi fugiat obcaecati magni blanditiis.</p>
<p>Reprehenderit optio porro, iste sunt...

CSS

body {
  max-width: 500px;
  margin: auto;
}

JavaScript

// Progress's final value
const value = 60
// The circle progress element
const cp = document.querySelector('circle-progress')
const intersectionCallback = (entries) => {
	entries.forEach(entry => {
  	// Transition value only when the circle progress is fully visible.
    // Reset to 0 when it is fully hidden.
  	if(entry.intersectionRatio === 1) {
      entry.target.value = value
    } else if (entry.intersectionRatio === 0) {
      entry.target.value = 0
    }
  })
}
const observer = new IntersectionObserver(intersectionCallback, {
	threshold: [0, 1],
})
observer.observe(cp)