JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<script>
  function check_if_in_view() {
    var window_height = $window.height();
    var window_width = $window.width();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    $.each($animation_elements, function () {
      if ($(this)[0].style.display !== 'none') {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if (element_top_position <= window_bottom_position &#038;&#038; element_bottom_position >= window_top_position) {
          var verticalDelta;
          var verticalDeltaPercent;

          if ($element.hasClass('fliplet-logo-container') && !$element.hasClass('in-view')) {
            $fliplet_menu_logo.animate({
                'opacity': 0
              },
              200,
              'swing',
              function () {
                $fliplet_menu_logo.css({
                  'visibility': 'hidden'
                });
              }
            );
          }

          if ($element.hasClass('multiple-apps-banner')) {
            verticalDelta = window_top_position;
            verticalDeltaPercent = verticalDelta / (element_bottom_position);
            var translateDistance = -window_width * verticalDeltaPercent;
            $element.css({
              'transform': 'translate3D(' + translateDistance + 'px ,0,0)'
            });
          }

          if (!$element.hasClass('in-view')) {
            $element.addClass('in-view');
          }

        } else {
          if ($element.hasClass('fliplet-logo-container') && $element.hasClass('in-view')) {
            $fliplet_menu_logo.css({
              'visibility': 'visible'
            });
            $fliplet_menu_logo.animate({
              'opacity': 1
            },...

JavaScript

document.body.innerHTML.replace(/&#038;/g, '&');