JSFiddle - React, Tailwind, and code Playground

by alan_omar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js" integrity="sha512-1dalHDkG9EtcOmCnoCjiwQ/HEB5SDNqw8d4G2MKoNwjiwMNeBAkudsBCmSlMnXdsH8Bm0mOd3tl/6nL5y0bMaQ==" crossorigin="anonymous"></script>
		<div class="scroller">
      
			<section class="orange">
				<div class="text">This is some text inside of a div block.</div>
			</section>
      
			<section class="black">
        
				<div class="text-wrap">          
          <div class="panel-text blue-text">Blue</div> 
          <div class="panel-text red-text">Red</div>   
          <div class="panel-text orange-text">Orange</div> 
          <div class="panel-text purple-text">Purple</div> 
        </div>
        
				<div class="p-wrap">
					<div class="panel blue"></div> 
					<div class="panel red"></div>
					<div class="panel orange"></div> 
					<div class="panel purple"></div> 
				</div>
        
			</section>
      
			<section class="blue">
        <button class="click-me">Click me </button> 
                <button class="contactUs" data-toggle="modal" data-target="#contactUsModal">Open Modal</button> 

			</section>
      


<div class="modal fade" id="contactUsModal" tabindex="-1" role="dialog" aria-labelledby="contactUsModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content main-content-box">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div class="container model-container-main">
                    <div class="row">
                        <div class="col-xl-9">
                            <div class="model-heading-main">
                                <h1 class="phone-number-heading">
                                    Contact Us
                                </h1>
                                <p>We'll get back to you within 24 hours.</p>
                                <div class="input-group mb-3 input-section" style="border: 1px solid;...

CSS

body,
html {
  margin: 0;
}
.scroller {
  height: 100vh;
}

.orange {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #753500;
}

.text {
  color: #fff;
}

.black {
  display: -w

JavaScript

gsap.registerPlugin(ScrollTrigger);
let bodyScrollBar = Scrollbar.init(document.body, {
  damping: 0.1,
  delegateTo: document,
});
ScrollTrigger.scrollerProxy(".scroller", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  },
});
bodyScrollBar.addListener(ScrollTrigger.update);







gsap.set(".panel", {
  zIndex: (i, target, targets) => targets.length - i
});

var images = gsap.utils.toArray('.panel:not(.purple)');

images.forEach((image, i) => {

  var tl = gsap.timeline({

    scrollTrigger: {
      trigger: "section.black",
      scroller: ".scroller",
      start: () => "top -" + (window.innerHeight * (i + 0.5)),
      end: () => "+=" + window.innerHeight,
      scrub: true,
      toggleActions: "play none reverse none",
      invalidateOnRefresh: true,
    }

  })

  tl
    .to(image, {
      height: 0
    });

});







gsap.set(".panel-text", {
  zIndex: (i, target, targets) => targets.length - i
});

var texts = gsap.utils.toArray('.panel-text');

texts.forEach((text, i) => {

  var tl = gsap.timeline({

    scrollTrigger: {
      trigger: "section.black",
      scroller: ".scroller",
      start: () => "top -" + (window.innerHeight * i),
      end: () => "+=" + window.innerHeight,
      scrub: true,
      toggleActions: "play none reverse none",
      invalidateOnRefresh: true,
    }

  })

  tl
    .to(text, {
      duration: 0.33,
      opacity: 1,
      y: "50%"
    })
    .to(text, {
      duration: 0.33,
      opacity: 0,
      y: "0%"
    }, 0.66);

});





ScrollTrigger.create({

  trigger: "section.black",
  scroller: ".scroller",
  scrub: true,
  markers: true,
  pin: true,
  start: () => "top top",
  end: () => "+=" + ((images.length + 1) * window.innerHeight),
  invalidateOnRefresh: true,

});



// Click me to top

$(document).ready(function() {
  $('.click-me').click(function() {
    $(window).animate({
      scrollTop: 0
    }, 'slow');
    //return...