JSFiddle - React, Tailwind, and code Playground

by thallysondias

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://www.socialsentinel.com/assets/js/scrollmagic/jquery.scrollmagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<link rel="stylesheet" href="http://www.omnibees.com/novo/css/foundation.css">
<link rel="stylesheet" href="http://www.omnibees.com/novo/css/omnibees.css">
<nav>
   HEADER FIX
</nav>

<section class="main-section">
    <div class="wrapper">
        <section>
            <div class="row">
                <div class="large-12 columns text-center fade-scroll" id="produto">
                    <h1>PRODUTO</h1>
                    <h3>TITULO LOTEM IPSUM</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consequatur odit illum vitae nisi culpa! Excepturi voluptatum voluptatem maiores praesentium voluptatibus consequuntur, amet explicabo, nihil optio rerum quidem fugit possimus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consequatur odit illum vitae nisi culpa! Excepturi voluptatum voluptatem maiores praesentium voluptatibus consequuntur</p>
                </div>
            </div>
        </section>
        <section>
            <div class="row">
                <div class="large-12 columns text-center fade-scroll" id="Caracteristica">
                    <h1>Caracteristica</h1>
                    <h3>TITULO LOTEM IPSUM</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consequatur odit illum vitae nisi culpa! Excepturi voluptatum voluptatem maiores praesentium voluptatibus consequuntur, amet explicabo, nihil optio rerum quidem fugit possimus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consequatur odit illum vitae nisi culpa! Excepturi voluptatum voluptatem maiores praesentium...

CSS

nav {
    position:fixed;
    width:100%;
    background:#000;
    height:50px;
    z-index:999;    
}

JavaScript

/*
  ScrollMagic
*/

// init controller
var controller = new ScrollMagic();

// Scroll Section to top when near to top from page

var sceneOptions2 = {duration: 500};
var divfocus = $("div.wrapper section");

new ScrollScene(sceneOptions2)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(divfocus[1])
.setTween(TweenMax.to(divfocus[1], 2, {scrollTo:{y:50}, ease:Back.easeOut}));

new ScrollScene(sceneOptions2)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(divfocus[2])
.setTween(TweenMax.to(divfocus[2], 2, {scrollTo:{y:50}, ease:Back.easeOut}));

new ScrollScene(sceneOptions2)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(divfocus[3])
.setTween(TweenMax.to(divfocus[3], 2, {scrollTo:{y:50}, ease:Back.easeOut}));


//FADEIN DIV's
var sceneOptions = {duration: 200, offset: -100};
var elements = $("div.wrapper section .fade-scroll");

new ScrollScene(sceneOptions)
.offset(-200)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(elements[0])
.setTween(TweenMax.from(elements[0], 0.5, {"opacity":0.1}));

new ScrollScene(sceneOptions)
.offset(-200)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(elements[1])
.setTween(TweenMax.from(elements[1], 0.5, {"opacity":0.1}));

new ScrollScene(sceneOptions)
.offset(-200)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(elements[2])
.setTween(TweenMax.from(elements[2], 0.5, {"opacity":0.1}));

new ScrollScene(sceneOptions)
.offset(-200)
.addTo(controller)
.triggerHook("onCenter")
.triggerElement(elements[3])
.setTween(TweenMax.from(elements[3], 0.5, {"opacity":0.1}));