JSFiddle - React, Tailwind, and code Playground

by Danielle Parkinson

SASS

html
  font-size: 12px
  color: #333
  font-family: open sans

.keyframes(@name; @arguments)
  @keyframes @name
    @arguments()

.animation(@arguments)
  animation: @arguments

.timeline
  display: flex
  align-items: center
  margin-bottom: 10em

  .marker 
    display: flex
    flex-direction: column
    width: 200px
    align-items: center

  .button-animation
    width: 60px
    height: 60px
    border-radius: 50%
    background: grey
  
  .visible 
    &:after 
      content: ""
      position: absolute
      width: 0
      height: 2px
      margin-top: 4px
      border-bottom: 2px solid red
      z-index: -1

  .animation-line-mixin(@delay: 0s) {
    .button-animation.visible:after {
      .keyframes(fade-in;{
		    100% { width: 200px; }
		  });
      .animation(fade-in 4s);
      animation-fill-mode: forwards;
      animation-delay: @delay;
    }
  }

    .marker:first-of-type {
      .animation-line-mixin();
    }

    .marker:nth-of-type(2) {
      .animation-line-mixin(3s);
    }
    .marker:nth-of-type(3) {
      .animation-line-mixin(6s);
    }
    .marker:nth-of-type(4) {
      .animation-line-mixin(9s);
    }
    .marker:last-of-type {
      button:after {
        display: none;
      
    }
  }
  //KEYFRAME ANIMATE TIMELINE LINE
}

//TOGGLE ICON CHANGE
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 34px;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "A";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  border-radius: 34px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:after {
  position: absolute;
  content: "Dark";
  height: 18px;
  width: 18px;
  right: 14px;
  bottom: 4px;
  -webkit-transition:...

JavaScript

var timelineRect = document.querySelector('.timeline').getBoundingClientRect();
var timelineTopPosition = timelineRect.y;
var markerButtons = document.getElementsByClassName("button-animation");

window.addEventListener("scroll", triggerTimelineAnimation);

console.log(timelineTopPosition);

function triggerTimelineAnimation (timelineTopPosition) {
  //console.log(window.scrollY);
  if (window.pageYOffset >= timelineTopPosition) {
  
    Array.from(markerButtons).forEach(button => {
      button.classList.add("visible");
    });
    
    window.removeEventListener("scroll", triggerTimelineAnimation);
    console.log("test");
  };
};