JSFiddle - React, Tailwind, and code Playground

by ovo1381

HTML

<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<script src="http://janpaepke.github.io/ScrollMagic/js/_dependent/greensock/TweenMax.min.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.debug.js"></script>
<div id="staticEvelope" class="active">
	<div class="envelope">
		<div class="contact_form paper">
			<h1 id="scale-it" class="title">Kreativbewerbung</h1>
		</div>
		<span class="top_flap close_sesame"></span>
		<span class="side_flaps"></span>
		<span class="bottom_flap"></span>
	</div>
</div>
<div id="fullpage">
	<div class="section full-screen" id="section0"></div>
	<div class="section full-screen" id="section1"></div>
	<div class="section full-screen" id="section2 scale-trigger"></div>
</div>

CSS

#scale-it { position: absolute; z-index:90000; color:#fff }

JavaScript

console.clear();
$(document).ready(function() {
    var controller = new ScrollMagic();
    var scale_tween = TweenMax.to('#scale-it', 1, {
      transform: 'scale(.75)',
      ease: Linear.easeNone
    });
    
    var scale_scene = new ScrollScene({
      offset: 20,
    })
    .setTween(scale_tween);
    
    controller.addScene([
      scale_scene,
    ]);
    
     scale_scene.addIndicators({zindex: 1, parent: "#fullpage"})
    

    
    $('#fullpage').fullpage({
        sectionsColor: ['#ff0000', '#00ff00', '#0000ff'],
        css3: true,
        scrollingSpeed: 1000
    });
    
    var contentOffset = 0; // offsetcache
    // function to update the current scroll offset
    var updateContentOffset = function () {
        var curOffset = $("#fullpage").offset().top;
        if (curOffset != contentOffset) {
            contentOffset = curOffset;
            controller.update();
        }
    }
    updateContentOffset(); // init
    setInterval(updateContentOffset, 100); // loop
    // overwrite ScrollMagic scrolltop getter
    controller.scrollPos(function(e) {
        return -contentOffset;
    });
    
});