Template: Scrollytelling with enter-view.js

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <title>scrollytelling</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
		    <script src="stickyfill.min.js"></script>
		    <script src="enter-view.min.js"></script>
        <link rel="stylesheet" href="scrollytelly.css">
    </head>
    <body>
 		
		 	<section id='scrolly-side'>
				 <div class='scrolly'>
					
					<article>
						<div class='step' data-width='10%' data-index='0'><p>Bar is 10%</p></div>
						<div class='step' data-width='90%' data-index='1'><p>Bar is 90%</p></div>
						<div class='step' data-width='50%' data-index='2'><p>Bar is 50%</p></div>
					</article>

<script>
				const container = d3.select('#scrolly-side');
				const stepSel = container.selectAll('.step');

function updateChart(index) {
					const sel = container.select(`[data-index='${index}']`);
					const width = sel.attr('data-width');
					stepSel.classed('is-active', (d, i) => i === index);
					container.select('.bar-inner').style('width', width);
				}

function init() {
					Stickyfill.add(d3.select('.sticky').node());

enterView({
						selector: stepSel.nodes(),
						offset: 0.5,
						enter: el => {
							const index = +d3.select(el).attr('data-index');
							updateChart(index);
						},
						exit: el => {
							let index = +d3.select(el).attr('data-index');
							index = Math.max(0, index - 1);
							updateChart(index);
						}
					});
				}
				init()
    	</script>
    </body>
</html>

https://d3js.org/d3.v4.min.js