JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<div id="container">
    
</div>

CSS

#container {
    position: relative;
}
.icon {
    display: none;
    position: absolute;
    width: 50px;
    height: 50px;
    background:red;
}

JavaScript

elm = $('<div>')
elm.addClass('icon')

$('#container').append(elm)

elm.show()


angle = Math.PI
l = 50
x = Math.floor(l * Math.cos(angle))
y = Math.floor(l * Math.sin(angle))


TweenLite.set(elm,{
    css: {
        left:"50px",
        top:"50px"
    }
})
TweenLite.to(elm, 2, {
    delay: 1,
    css: {
        left: "+="+x+"px",
        top: "+="+y+"px"
    },
    ease: Bounce.easeInOut,
    onComplete: function() {
        alert('completed');
    }
});