JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://cdn2.hubspot.net/hubfs/3484932/Assets/Javascript/ScrollMagic.min.js"></script>
<div data-scrollmagic-pin-spacer="" class="scrollmagic-pin-spacer" style="top: auto; left: auto; bottom: auto; right: auto; margin: 0px; display: block; position: relative; box-sizing: content-box; width: 100%; min-height: 720px; height: 720px; padding-top: 199.781px; padding-bottom: 900.219px;"><div id="desktopAccordion" class="span12 widget-span widget-type-cell hidden-phone" style="background-color: rgb(242, 242, 242); position: fixed; margin: auto; top: -168.5px; left: 185px; bottom: auto; right: auto; box-sizing: border-box; width: 1360px;" data-widget-type="cell" data-x="0" data-w="12">

<div class="row-fluid-wrapper row-depth-1 row-number-47">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-custom_widget hidden-phone" style="height:50px;" data-widget-type="custom_widget" data-x="0" data-w="12">
<div id="hs_cos_wrapper_module_15295004385261026" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_module_spacer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space" style="" data-hs-cos-general-type="widget" data-hs-cos-type="space"></span></div>

</div><!--end widget-span -->
</div><!--end row-->
</div><!--end row-wrapper -->

<div class="row-fluid-wrapper row-depth-1 row-number-48">
<div class="row-fluid ">
<div class="span12 widget-span widget-type-custom_widget " style="" data-widget-type="custom_widget" data-x="0" data-w="12">
<div id="hs_cos_wrapper_module_15295004676721031" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-rich_text widget-type-rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_module_15295004676721031_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style=""...

CSS

.timeline{
  border-left:1px solid black; 
}
img{
      border-width: 0px;
    border: 0px;
    display: block;
    margin: 0px auto;
    width: 400px;
        float: left;
}

.timeline-one, .timeline-two, .timeline-three{
  height:15px; 
  width:15px; 
  background-color:rgb(0,174,255); 
  border-radius:50%; 
  margin-left:-8px; 
}

.panel{
  display:none; 
  padding-left:30px; 
}

.timeline-title-one, .timeline-title-two, .timeline-title-three{
  color:rgb(0,174,255);
  padding-left:30px;
  cursor:pointer; 
}


.widget-span.widget-type-custom_widget.timeline-image-two, .widget-span.widget-type-custom_widget.timeline-image-three{
  display:none; 
  transition:.8s ease all; 
}

.timeline-content-one, .timeline-content-two, .timeline-content-three{
  padding-left:30px; 
}

.timeline-content-two, .timeline-content-three{
  display:none; 
}


@media screen and (max-width:767px){
  
.timeline-one, .timeline-two, .timeline-three{
  height:20px; 
  width:20px; 
  background-color:rgb(0,174,255); 
  border-radius:50%; 
  margin-left:-11px;
  border:none; 
} 
  
.scrollmagic-pin-spacer{
	padding-bottom:0px!important;  
}
  
  
}

JavaScript

var controller = new ScrollMagic.Controller();



  var scene1 = new ScrollMagic.Scene({
    triggerElement: '#desktopAccordion', // starting scene, when reaching this element 
    duration: 1100, // pin the element for a total of 400px
    offset: 400, 
    reverse: true 
  })
  .setPin('#desktopAccordion') 
  controller.addScene(scene1); 


  var scene2 = new ScrollMagic.Scene({
    triggerElement: '#desktopAccordion', // starting scene, when reaching this element 
    offset: 700,
    reverse: true 
  })
  controller.addScene(scene2);


  var scene3 = new ScrollMagic.Scene({
    triggerElement: '#desktopAccordion', // starting scene, when reaching this element 
    offset: 1100, 
    
    reverse: true 
  })

  controller.addScene(scene3);

  


  scene1.on("enter", function (event) {
    console.log('direction One: ' + event.scrollDirection); 
    $('.timeline-content-one').show();
    $('.timeline-content-two').hide();
    $('.timeline-content-three').hide();
    $('.widget-span.widget-type-custom_widget.timeline-image-one').fadeIn();
    $('.widget-span.widget-type-custom_widget.timeline-image-two').hide();
    $('.widget-span.widget-type-custom_widget.timeline-image-three').hide();
  }); 


  scene2.on("enter", function (event) {
    console.log('direction Two: ' + event.scrollDirection); 
    $('.timeline-content-one').hide();
    $('.timeline-content-two').show();
    $('.timeline-content-three').hide();
    $('.widget-span.widget-type-custom_widget.timeline-image-one').hide();
    $('.widget-span.widget-type-custom_widget.timeline-image-two').fadeIn();
    $('.widget-span.widget-type-custom_widget.timeline-image-three').hide();
  }); 



  scene3.on("enter", function (event) {
    console.log('direction three: ' + event.scrollDirection); 
    $('.timeline-content-one').hide();
    $('.timeline-content-two').hide();
    $('.timeline-content-three').show();
    $('.widget-span.widget-type-custom_widget.timeline-image-one').hide();
   ...