JSFiddle - React, Tailwind, and code Playground

by this_mong

HTML

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
<script src="https://cdnjs.com/libraries/fullPage.js"></script>
<div id="fullpage">
<div class="section" id="section0">
    <div class="intro">
        <div data-aos="fade-up">
            <h1>fade me up!</h1>
        </div>
    </div>
</div>
<div class="section" id="section1">
    <div class="slide">
        <div class="intro">
            <div data-aos="zoom-in">
                <h1>zoom me in!</h1>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="intro">
            <div data-aos="flip-down">
                <h1>flip me down!</h1>
            </div>
        </div>
    </div>
</div>

JavaScript

AOS.init();  // AOS initiation

$('.aos-init').removeClass('aos-animate'); // remove ALL classes which triggers animation in document

new fullpage('#fullpage', {   // standard fullpage usage
    responsive: true,
    navigation: true,
    anchors: ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'],

    afterLoad: function(){       
        var a_table = ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'];   // duplicated table of anchors name

        for (var i = 0; i < a_table.length; i++) {
            $('.section-'+ a_table[i] +'.active .aos-init').addClass('aos-animate'); // all magic goes here - when page is active, then all elements with AOS will start animate
        }
    }
}