Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Horizontal animation jumps

Recommended Posts

I've been able to resolve this issue in the past by using rotation: 0.01, using x or y rather than left or top as well as force3d, etc. Can't figure out why this animation seems to jump forward every so often. I'm using this animation setup to allow export to MP4 and even stepping one frame at a time to capture the canvas shows the jerkiness even more. It's not consistent so obviously has to do with browser performance. I just can't figure out what to do to resolve it.

 

Any ideas? Anyone?

See the Pen broGmZ?editors=0010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

By inspecting each frame I'm seeing a lot of transforms that look like:
 

transform: matrix3d(1, 8.72665e-06, 0, 0, -8.72665e-06, 1, 0, 0, 0, 0, 1, 0, 1183.99, 0, 0, 1)

 

In inspector I'm seeing this when zoomed into a recorded timeline...

stuttering.png?dl=1

 

Could it have something to do with this?
https://greensock.com/will-change

 

Also noticing the recurring "Forced reflow us likely a performance bottleneck." message. Pretty sure it has something to do with this...
https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid_forced_synchronous_layouts

To be clear, the above screenshot is from the Chromium browser used in Electron 1.6.6. The note above refers to a couple of lines in jQuery but I have completely removed any jQuery selectors in the timeline. 

 

Both of those Forced reflow warnings are triggered by line 5799 of the following jQuery screenshot...
jquery-warning.png?dl=1

Edited by swampthang
Found another clue
Link to comment
Share on other sites

Since I started this, I think I'll finish it for anyone else who might run into this. First, let me say that this is not a problem with GSAP's library. If you're not interested in exporting out to video - fair warning - don't waste your time with the following explanation.

 

The problem was only partly the reflow issues. In order to create a video file, I've been stepping through my main timeline one frame at a time which I do like this....

 

var FPS = 60, // The user gets to set the export frame-rate and many users are setting it at 30 FPS.
    duration = masterTL.duration();
    frames   = Math.ceil(duration / 1 * FPS),
    current  = 0;

function processImage() {
  
  var canvas = document.createElement("canvas");
  canvas.width = WD;
  canvas.height = HT;

  var ctx = canvas.getContext("2d");
  
  masterTL.progress(current++ / frames);
  
  /* 
  here I use XMLSerializer().serializeToString(myMasterSVG), convert that to an imageURL and 
  save it out as a transparent png with a sequenced filename - img0001.png
  then...
  */
  
  if (current <= frames) {
    processImage();
  } else {
    /* 
    when all the frames have been processed I run an FFMPEG script that uses the png sequence 
    as an input for creating an overlay onto a composite video.
    */
  }
}

 

The nature of the ticker animation above (slowly crawling across the screen in a set direction) revealed the fact that 30 FPS was creating videos that were stuttering. The reason the other text animations used in my app didn't is they were all fairly quick and had ease effects that further masked the problem. It's my understanding that GSAP defaults to 60 FPS and in a browser, it also takes advantage of some sub-pixel interpolation.

 

To resolve a good bit of the stuttering in the exported video, I've upped the default export rate to match GSAP - 60 FPS. That helped a good bit but there were a few other things causing problems related to reflowing. The main one was the fact that there is a timeline representation in this app that was being repositioned in an onUpdate eventCallback. I defeated that by adding an exporting boolean and before and after exporting I run:

 

function setExporting(status) {
  exporting = status;
  if( exporting ) {
    masterTL.eventCallback("onUpdate", null);
  } else {
    masterTL.eventCallback('onUpdate', updateSlider);
  }
}

 

The other thing that was an issue in the export video had to do with settings in FFMPEG commands (using node-fluent-ffmpeg). There are some optimum output settings for using a png sequence as an input but they're more difficult to call in a composite script for assembling it as one video from multiple inputs. So, I decided to first export the PNG sequence to a transparent MOV file and then use it as an overlay in combination with other background videos, etc.

 

Seems to have smoothed things out wonderfully. Thanks again to Greensock for this awesome library!

  • Like 4
Link to comment
Share on other sites

Thanks for sharing your experience and all the clear details. Very helpful.

Link to comment
Share on other sites

Thanks, Carl. One other thing worth mentioning for anyone else attempting to combine GSAP animations for use in video via FFMPEG is that you should take care to match/force frame rates when combining inputs that result in a composite video output.

 

Frame rates for videos can vary a good bit, i.e., 25, 30, 29.97, 60, etc. FFMPEG defaults to 25 if you use it to create something from an input that has no FPS metadata. For example, a video from an image.

 

I was overlaying the MOV file at 30-FPS (created from stepping through the GSAP animation frames as explained above) onto a background MP4 at 25-FPS (created from a background image) and that was also causing a good bit of stutter. Setting the frame rate for the background video to match (30-FPS) resulted in a pretty smooth motion. 60-FPS is still better. ?

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.
×