JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="cursor"></div>
<div class="box"></div>

CSS

.cursor {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    border: 3px solid rgba(255,255,255,0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: blue;
    transition: all 0.5s;
}
.box:hover {
    transform: scale(1.1);
}

.box:active {
    transform: scale(0.9);   
}

JavaScript

var cursor = $('.cursor');
var box = $('.box');
var events = [];
var event = function ( target, type, options ) {
    options = options || {};
    options.wait = options.wait || 0;
    options.delay = options.delay || 0;
    return { type: type, target: target, options: options  };
};
var play = function ( events, position ) {
    position = position || 0;
    trigger( events[ position ], cursor );
    console.log(position);
    position++;       
    if ( position < events.length ) {
        setTimeout( function () {
            play( events, position ); 
        }, events[ position ].options.delay);
    }
};
var trigger = function ( e, cursor ) {
    var x = e.target.offset().left;
    var y = e.target.offset().top;
    var width = e.target.width();
    var height = e.target.height();
    x = x + ( width / 2 );
    y = y + ( height / 2 );
    cursor.animate({ x: x + 'px', y: y + 'px' }, e.options.wait, function () {
        e.target.trigger( e.type );
    }); 
};

events.push( new event( box, 'mouseover', { wait: 300, delay: 500 } ) );
events.push( new event( box, 'click', { delay: 500 } ) );
events.push( new event( box, 'mouseout', { delay: 500 } ) );

console.log( events );
play( events );