Performance issue tweening multiple elements

[ariel]

Hello!

 

I'm having trouble animating multiple elements smoothly.

The animation is not as fluid as I hoped, on mobile it gets even more noticeable.

I've tried a bunch of things and nothing seems to have any effect.

Maybe there's a better approach to achieve the same result, I don't know, I'm just running out of ideas

 

I created a code pen

 

Thanks!

See the Pen GpGJZP?editors=001 by anon (@anon) on CodePen

[Jonathan]

Hello ariel, and Welcome to the GreenSock Forum!

 

I didnt see slow performance on my android phone.. Droid Turbo, latest Android version.

 

I did see that when it started it briefly flashes your blue elements in and out.

 

Since you are using a from() tween, they are run immediately by default. So its best to use immediateRender:true on your from() tweens.

 

Also there is no need to force3D:true, since SVG elements do not use 3D transforms. SVG elements only support 2D Transforms with the SVG 2.0 spec. Eventually SVG 3.0 spec will allow 3D transforms.

 

Taken from the GSAP from() Docs:

• NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins.

You dont need to use the add() method as well since your doing a bunch of sequenced tweens. The add() methods is best used in nested timelines, within a master timeline.

 

If you wanted to push your elements with hardware acceleration (GPU). Then it would be best to just use <div> tags so you can take advantage of force3D:true. But with SVG you cant add div tags around child SVG elements.

 

Also you will notice i use the GSAP set() method to make sure your #logo polygon are set to visibility:hidden  although I could have just used it in your CSS, so GSAP does not need to write the initial set() i have below:

#logo polygon {
    visibility:hidden;
}

So your code would look like this:

 

See the Pen yYEYMv by jonathan (@jonathan) on CodePen

 

Full mode preview in codepen for a better viewing on mobile with out all of codepen editor hoopla:

 

See the Pen yYEYMv by jonathan (@jonathan) on CodePen

 

var tl = new TimelineMax({
  paused: true
});

var element = document.querySelectorAll('#logo polygon');

// set initial state of logo to hidden so you don't see it on first run
TweenMax.set(element,{visibility:"hidden"});

function randomIntroNum() {
  var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
  var ranNum = (Math.random() * 10) + (1);
  return ranNum * plusOrMinus * 1000;
};

function takeAwayFromScreen(element) {

  // make sure logo is visible before animating svg polygon element children in
  tl.set(element,{visibility:"visible"});

  for (var i = 0; i < element.length; i++) {
    tl.from(element[i], 5, {
      immediateRender:false, /* add this since using a from() tween to prevent flash of elements on first run */
      x: randomIntroNum(),
      y: randomIntroNum(),
      ease: Back.easeOut
    }, 0);
  }
}

// waits until the DOM is ready
$(document).ready(function() {
 
  // waits until all images, stylesheets,
  // links, and other assets are loaded
  $(window).on("load", function(){
 
      takeAwayFromScreen(element);

      // replaces setTimeout the GSAP way with delayedCall()
      TweenMax.delayedCall(1, function(tl) {

          tl.play(); /* then play your animation */

      },[tl]);

  });
 
});

The window load event makes sure all images, CSS style sheets, links, and other assets are loaded after the DOM is loaded from your jQuery ready() event.

 

Also you will notice i replaced setTimeout with GSAP delayedCall()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

 

delayedCall()

• Provides a simple way to call a function after a set amount of time (or frames). You can optionally pass any number of parameters to the function too.
• Note: - Due to the way JavaScript doesn't maintain scope (what "this" refers to, or the context) in function calls, it can be useful to define the scope specifically. Therefore, the 4th parameter allows you to define the scope.

//calls myFunction after 1 second and passes 2 parameters:
TweenMax.delayedCall(1, myFunction, ["param1", "param2"]);

function myFunction(param1, param2) {
    //do stuff
}

On a side note. Canvas works best for animating a great number of elements, sprites, or particles. Since canvas is just drawing it onto the canvas. With SVG or HTML it is DOM based animations, which will cause greater CPU and GPU demands due to the nature of the DOM structure.

 

Let us know if you have anymore questions! Or if still having issues please specify the mobile phone, OS version and mobile browser