JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

JavaScript

var parent = document.querySelector('div');
var child1 = document.querySelectorAll('div')[1];
var child2 = document.querySelectorAll('div')[2];
var duration = 0.8;

parent.addEventListener('click', onClickedParent, false);

function onClickedParent(e) {
    console.log();
    TweenMax.fromTo(child1, 1, {
        position: 'absolute',
        top: '50%',
        left: '50%',
        yPercent: -50,
        xPercent: -50,
        width: 400,
        height: 400,
        scale: 0,
        backgroundColor: '#cc0',
        transformOrigin: (e.offsetX/400*100) + '% ' + (e.offsetY/400*100) + '%'
    }, {
        scale: 1,
        ease: Expo.easeInOut
    });
}

TweenMax.set(parent, {
    position: 'absolute',
    top: '50%',
    left: '50%',
    yPercent: -50,
    xPercent: -50,
    width: 400,
    height: 400,
    backgroundColor: '#999'
});