JSFiddle - React, Tailwind, and code Playground

by Nataliia Vernyhora

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<section id="container">
  <header>hello, world!</header>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
  x<br/>
</section>

CSS

body {
  padding: 0;
  margin: 0;
  font: 1em Arial, Helvetica, Sans-serif;
}
.nav_active, .nav_active body {overflow: hidden;}
section {
  position: relative;
  background: linear-gradient(#69F,#F96);
  padding: 0 1em;
}
.nav_active section {background: red;}
header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: lime;
  padding: 2em 1em;
}
.nav_toggle {
	position: fixed;
	top: 1em;
	right: 1em;
	width: 2em;
	height: 2em;
	border: 1px solid red;
	background-color: yellow;
	cursor: pointer;
}

JavaScript

gsap.registerPlugin(ScrollTrigger);
var pageHeader = $('section > header');
var fadeToggle;

// create toggle button and insert it in the DOM
var navToggle = $('<a/>', {
	class: 'nav_toggle',
	click: function() {
		if (!$('html').hasClass('nav_active')) {
			$('html').addClass('nav_active');
			
      fadeToggle = gsap.to(pageHeader, {
        opacity: 1,
        padding: '2em 1em'
      });
		} else {
			$('html').removeClass('nav_active');
			
      fadeToggle.reverse();
		}
	}
}).insertAfter(pageHeader);

var anim_header = gsap.timeline({
	scrollTrigger: {
		trigger: $('body'),
		scrub: true,
		// markers: true,
		start: 'top top',
		end: '+=' + pageHeader.outerHeight() * 1.75 + 'px'
	}
});
// get the default styles on load to animate to
var defaultStyles = {
  header: pageHeader.css(['opacity','padding'])
}
// scroll animation
anim_header
  .to(pageHeader, {
    opacity: 0,
    padding: '1em'
  });