JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div class="animate" data-animIn="up" data-animOut="left">
    
</div>
<div class="animate" data-animIn="right">
    
</div>
<div class="animate" data-animIn="down">
    
</div>
<div class="animate" data-animIn="left">
    
</div>

<div class="animate">
    
</div>

CSS

div {
    width: 100px;
    height: 100px;
    background: #2034ff;
    background: rgba(20,34,255,0.4);

    position: absolute;
    top: 100px;
    left: 100px;
    opacity: 0;
    
}

JavaScript

(function($){
"use strict";    
$.fn.anim = function(x){
    //settings
    var speed = 1000;
    
    var anim = $(this).anim;
    var dir = typeof(x) !== "string" || x !== 'out';
    
    
    //log the end position after animation
    $.fn.logPosition = function(){
        
        $(this).data($(this).position());
        
    };
    //perform movements
    $.fn.movement = function(){
        var posData = $(this).data();
        if (window.console) console.log(posData);
        var direction = (dir ? posData.animin : posData.animout);
    if (window.console) console.log(direction);

        if(dir){
            $(this).startAnim(direction, posData).animate({'top':posData.top+'px','left': posData.left+'px','opacity': 1}, speed);
        }
    };
    var opposite = function(x){
        switch (x){
            case 'up': 
                return 'down';
            case 'down':
                return 'up';
            case 'left':
                return 'right';
            case 'right':
                return 'left';
            default:
                return 'fade';
        }
    };
    $.fn.startAnim = function(direction, posData){
        switch (direction){
            case 'up':
                $(this).css({"top" : $(window).height()*2+"px"});
                break;
            case 'down':
                $(this).css({"top" : "-"+$(window).height()+"px"});
                break;
            case 'left':
                $(this).css({"left" : "-"+$(window).width()+"px"});
                break;
            case 'right':
                $(this).css({"left" : $(window).width()*2+"px"});
                break;
            default:
                if (window.console) console.log('fade');
                break;

        }
        return this;
    };
    
    
    
    //get the required direction
    $.fn.checkDirection = function(){
        if(typeof($(this).attr('data-animOut')) !== 'string'){
            $(this).data('animOut',...