JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="scene">
<div class="first blade"> <h2>FIRST</h2></div>
  <div class="second blade"><h2>SECOND</h2></div>
  <div class="third blade"><h2>THIRD</h2></div>
</div>

CSS

.blade {
  height: 100vh;
  width: 100%;  
  border: 1px solid green;
}

JavaScript

var controller = new ScrollMagic.Controller();	
 
 $('.blade').each(function(index){ 
   var scene;
   var blade = $(this);
   var offset = $(this).height() * 0.3;
   scene = new ScrollMagic.Scene( {triggerElement: this, triggerHook:0, duration: $(this).height() - offset, offset: offset} );

   scene.on('enter', function(e){
      if((index <  $('.blade').length - 1) && e.scrollDirection == "FORWARD") {
          $('html, body').animate({
              scrollTop: blade.next().offset().top
          }, 100);
      }
   });
   scene.on('leave', function(){

   });
   scene.addTo(controller);
	// To get a clear perspective of the trigger points uncomment this
   //scene.addIndicators({name: 'scene '+index})
 });