felipexavier
felipexavier's Achievements
0
Reputation
-
I have a mobile application with 17 animations using GSAP. The problem is that they are slow when they are running simultaneously! sorry for bad English
-
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); }
-
unfortunately I can not do this! Anyway, I can write, help in something? are 17 animations in total.
-
Hello guys, I'm with a doubt in building an application. I have a home screen where there are multiple animations. The animations are made in SVG images. But the problem is that they are getting too slow and when they stop using scroll animate (in IOS) and are slower (on Android). Could someone tell me if there is any limit animations for a mobile application? or if it really works? Thank you very much in advance
-
very cool this bee. my bee this front! image -> http://postimg.org/image/cc036d6sl/ flapping wings!
-
dear friends I need a big help. I stopped on a problem that could not find solution. I have a svg of a bee and I need to put effect beating wings but can not create this effect, someone could help me? the wing has to do a flip backwards and back, simulating the flapping of wings
-
thank you!!! I removed the repeat: -1 in the animation from(tinta1, 2, {left: 200, opacity:0}); ai worked as I wanted, but I have one more doubt, as I would for color appears without effect fade ?
-
I have the image of a painting and on this painting will appear 3 color images. I showed them. The problem is who are appearing at the same time and it can not happen. can anybody help me? code: var tl = new TimelineMax({delay:1, repeat:-1}); tl.from(color1, 2, {left: 200, opacity:0, repeat:-1}).from(color2, 2, {left: 200, opacity:0, repeat:-1}).from(color3, 2, {left: 200, opacity:0, repeat:-1}); sorry for the horrible English