Scroll demo w/ remove

by nancynancy

HTML

<main>
  <section id='scrolly'>

    <article>
      <div class='step' data-step='1'>
        <p>STEP 1</p>
      </div>
      <div class='step' data-step='2'>
        <p>STEP 2</p>
      </div>
      <div class='step' data-step='3'>
        <p>STEP 3</p>
      </div>
      <div class='step' data-step='4'>
        <p>STEP 4</p>
      </div>
    </article>

    <figure>
      <p>0</p>
    </figure>
  </section>

  <section id='outro'></section>
</main>
<script src='https://unpkg.com/[email protected]/dist/d3.min.js'></script>
<script src='https://unpkg.com/[email protected]/intersection-observer.js'></script>
<script src='https://russellgoldenberg.github.io/scrollama/stickyfill.min.js'></script>
<script src='https://russellgoldenberg.github.io/scrollama/scrollama.min.js'></script>

CSS

#scrolly {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #f3f3f3;
  padding: 1rem;
}

#scrolly>* {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}


article {
  position: relative;
  padding: 0 1rem;
  max-width: 20rem;
}

figure {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  margin: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  background-color: #d5b4ed;
}

figure p {
  text-align: center;
  padding: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 8rem;
  font-weight: 900;
  color: #000000;
}


.step {
  margin: 0 auto 2rem auto;
  background-color: #3b3b3b;
  color: #fff;
}

.step:last-child {
  margin-bottom: 0;
}

.step.is-active {
  background-color: goldenrod;
  color: #3b3b3b;
}

.step p {
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
}

JavaScript

// using d3 for convenience
var main = d3.select('main')
var scrolly = main.select('#scrolly');
var figure = scrolly.select('figure');
var article = scrolly.select('article');
var step = article.selectAll('.step');

var width = 200;
var height = 300;
var margin = {
  top: 40,
  bottom: 40,
  left: 70,
  right: 40
};

var g = scrolly.select('figure')
  .append("svg")
  .attr("class", "container")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)

var makeCircle0 = function() {
  d3.selectAll(".nancygraphs").interrupt().remove()
  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "red")
    .attr("id", "red")
    .attr("opacity", 0)
    .transition()
    .duration(1000)
    .attr("opacity", 1)
    .attr("class", "nancygraphs")
}

var makeCircle1 = function() {
  d3.selectAll(".nancygraphs").interrupt().remove()
  g.append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "yellow")
    .attr("id", "yellow")
    .attr("opacity", 0)
    .transition()
    .duration(1000)
    .attr("opacity", 1)
    .attr("class", "nancygraphs")
}

var makeCircle2 = function() {
  d3.selectAll(".nancygraphs").interrupt().remove()
  g.append("circle")
    .attr("cx", 150)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "green")
    .attr("id", "green")
    .attr("opacity", 0)
    .transition()
    .duration(1000)
    .attr("opacity", 1)
    .attr("class", "nancygraphs")
}

var makeCircle3 = function() {
  d3.selectAll(".nancygraphs").interrupt().remove()
  g.append("circle")
    .attr("cx", 200)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "blue")
    .attr("id", "blue")
    .attr("opacity", 0)
    .transition()
    .duration(1000)
    .attr("opacity", 1)
    .attr("class", "nancygraphs")
}

var scroller = scrollama();
var activateFunctions = [];
activateFunctions[0] = makeCircle0;
activateFunctions[1] =...