Jump to content
Search Community

Multiple animations are slow

felipexavier test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hello felipexavier, and Welcome to the GreenSock Forum!

 

GSAP is very performance driven, so dealing with 17 animations is not that much at all. Most of the time animations become slow or buggy when you try to animate very large images. Or 100's or 1,000's of DOM or SVG elements. But that would not be a limitation of GSAP, but a limitation of modern browsers.

 

As long as your CSS and HTML is setup right, then animating with GSAP can handle what you throw at it.

 

Here is a link shwoing how performance driven GSAP is. Try this speed test, that compares GSAP with jQuery, Zepto (CSS) animations / transitions

 

See the Pen srfxA by GreenSock (@GreenSock) on CodePen

 

I would also 2nd ZachSaucier advice on providing a codepen demo example! In order to help you better its always good to create a limited codepen demo with the issue your having. This way we can see your code in context and edit your code in a live editable environment.

 

Here is a video tut on how to create a codepen demo example. All we need is just a couple of tween showing what your having an issue with. We don't need your whole project.

 

 

Thanks! :)

  • Like 3
Link to comment
Share on other sites

Hi Felipe,

 

The main issue here could be that you're asking too much from devices with limited hardware. Keep in mind that SVG is not hardware accelerated, so basically you're draining every bit of hardware from the poor devices if a lot of animations are happening at the same time.

 

Perhaps you can get some helpful tips in this post:

 

http://greensock.com/forums/topic/13681-svg-gotchas/

 

Finally as Jonathan and Zach mentioned, without a live/reduced sample is hard to see what the problem is. So at least try to provide a live sample link to see how this is working.

  • Like 5
Link to comment
Share on other sites

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);
    
}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...