JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
<div class="wrapper">
</div>

<a href="#" class='go'>Animate</a>

CSS

body {
     font-size:4em;
}

.wrapper {
    
}
.box {
  background:red;
  width:100px;
  height:100px;
  opacity: 0;
}

JavaScript

var currentElm;
var wrapperElm = $('.wrapper');

var boxHTML = function() {
    var box = $('<div class="box">');
    var h = Math.floor(Math.random() * 150) + 100
    box.height(h);
    return box;
};

var render = function(view) {
    if(currentElm) {
        cb = function() {
            currentElm.removeClass('active');
            renderIn(view);
        };
        animateOut(currentElm,cb);
    } else {
        renderIn(view);
    }    
}

var renderIn = function(view) {
    wrapperElm.append(view);
    currentElm = wrapperElm.find('.box:last-child');
    currentElm.addClass('active');
    
    new_height = currentElm.innerHeight();
    console.log('tweening to new height',new_height);
    
    TweenLite.to(wrapperElm, .3, {
        height: new_height,
        ease: Power2.easeInOut,
        onComplete: function() {
            console.log('height tween complete');
            animateIn(currentElm);
        }      
    });
}

var animateOut = function(elm,callback) {
    console.log('animateOut');
    TweenMax.to(elm, .1, {
        opacity: 0,
        onComplete: function() {
            elm.remove();
            callback();
        }
    });
}

var animateIn = function(elm) {
    console.log('animateIn');
    TweenLite.to(elm, .1, {
        opacity: 1
    });
}

$('.go').on('click',function(e) {
  e.preventDefault()
  render(boxHTML());
});