JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<div id="console"></div>
<div id="box"></div>
<div id="box1"></div>
CSS
#box{
position:relative;
width:200px;
height:200px;
background-color:#f60;
}
#box1{
position:relative;
width:200px;
height:200px;
background-color:#f60;
}
JavaScript
//click the orange box. it will be removed from DOM but animation but TweenLite will still run.
var count = 0;
var box = $('#box');
var box1 = $('#box1');
var console = $('#console');
TweenMax.to(box, 5, {css:{left:300}, repeat:50, yoyo:true, onUpdate:update});
box.click(function(){
TweenMax.killAll();
TweenMax.ticker.removeEventListener();
$(this).remove();
})
box1.click(function(){
var div = document.createElement("div");
div.id="box1";
//document.body.appendChild(div);
//TweenMax=null;
_addJSReferenceInBody("https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js");
//var box = $('#box');
setTimeout(function () {
alert(TweenMax)
TweenMax.to(box1, 5, {css:{left:300}, repeat:50, yoyo:true, onUpdate:update});
}, 10000);
})
function _addJSReferenceInBody(jsFileUrl) {
if (typeof Smilebox.Helper.getBaseRootUrl === "function") {
var b = document.createElement('script');
b.async = 0;
b.src = jsFileUrl;
document.getElementsByTagName('body')[0].appendChild(b);
}
}
function update(){
console.html(count++);
}