so the slowness that giving is a browser problem, it does not support it?
I put some codes to see if it helps in something
<!DOCTYPE html>
<html>
<head>
<title>Projeto Kids</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy"/>
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<script src="xdk/init-dev.js"></script>
<script src="js/lib/jquery-1.12.1.min.js"></script>
<script src="js/lib/jquery-ui-1.11.14.min.js"></script>
<script src="js/lib/howler.min.js"></script>
<script src="js/lib/TweenMax.min.js"></script>
<script src="js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="js/lib/jquery.drawsvg.min.js"></script>
<script src="js/animacoes/aviao.js"></script>
<script src="js/animacoes/bia.js"></script>
<script src="js/animacoes/pintura.js"></script>
<script src="js/animacoes/kids.js"></script>
</head>
<body>
<div class="parede objs"></div>
<div class="chao objs" class="drag"></div>
<div class="aviao objs">
<object type="image/svg+xml" id="aviaoObj" data="img/aviao.svg" data-init="startAviao" data-end="stopAviao" width="100%" height="100%"></object>
</div>
<div class="bia objs" class="drag">
<object type="image/svg+xml" id="biaObj" data="img/bia.svg" data-init="startBia" data-end="stopBia" width="100%" height="100%"></object>
</div>
<div class="pintura objs">
<object type="image/svg+xml" id="pinturaObj" data="img/pintura.svg" data-init="startPintura" data-end="stopPintura" width="100%" height="100%"></object>
</div>
</body>
</html>
bia.js
var animacaoBiaBraco = new TimelineMax({yoyo:true, repeat:-1});
var animacaoBiaMao = new TimelineMax({yoyo:true, repeat:-1});
function initBia() {
var biaDoc = elementos("biaObj");
var braco = biaDoc.getElementById("antebraco");
var mao = biaDoc.getElementById("mao");
bracoBia(braco);
maoBia(mao);
}
function bracoBia(braco) {
animacaoBiaBraco.from(braco, 0.1, {delay:0.1})
.from(braco, 1, {rotation:"-=7", transformOrigin:"left bottom"});
}
function maoBia(mao) {
animacaoBiaMao.from(mao, 0.1, {delay:0.1}).from(mao, 1, {y:-2, x:0, rotationZ:'-=30', transformOrigin:"bottom 100%"});
}
kids.js
window.onload = function () {
initBia();
initPintura();
};
function elementos(animacao) {
var obj = document.getElementById(animacao);
var objDoc = obj.contentDocument;
return objDoc;
}
second animation:
var timelinePintura = new TimelineMax({delay: 2, repeat:-1});
function initPintura() {
var pinturaDoc = elementos("pinturaObj");
var tinta1 = pinturaDoc.getElementById("tinta1");
var tinta2 = pinturaDoc.getElementById("tinta2");
var tinta3 = pinturaDoc.getElementById("tinta3");
iniciarPintura(tinta1, tinta2, tinta3);
}
function iniciarPintura(tinta1, tinta2, tinta3){
timelinePintura.set([tinta1, tinta2,tinta3], {opacity: 1});
timelinePintura.from(tinta1, 1, {delay: 1})
.from(tinta1, 0.05, {scale: 0}, 1)
.from(tinta2, 0.05, {scale: 0}, 2)
.from(tinta3, 0.05, {scale: 0}, 3)
.to(tinta1, 1, {opacity: 0 , ease: Power1.easeInOut})
.to(tinta2, 1, {opacity: 0 , ease: Power1.easeInOut})
.to(tinta3, 1, {opacity: 0 , ease: Power1.easeInOut})
.from(tinta3, 0.05, {delay: 1}, 2);
}