GSAP and Two.js - Canvas Performances

[athr11]

Hi all,

happy to join this forum with my first post! 

 

I've been using GSAP for quite some time now (Loving it!), and I also started to integrate his capability along with other cool drawing libraries. 

 

In this case, I'm having some hard time figuring out why frame-rate and animation performances decrease drastically on Safari and Firefox (Chrome is buttery smooth) when animating the following SVG shape using a combination of GSAP and two.js (Canvas Rendering).  
 

See the Pen yRjmKX by mirkosantangelo (@mirkosantangelo) on CodePen

 

I've tried to change the rendering intent from canvas to SVG (via the two.js API) and animate a standalone SVG with GSAP only. In all scenarios, I'm experiencing the aforementioned issues.

 

Does anyone have some good suggestion?

 

Many thanks in advance!

 

 

See the Pen yRjmKX by mirkosantangelo (@mirkosantangelo) on CodePen

[OSUblake]

I didn't notice any problems on my computer.

 

If you're using a HiDPI monitor (retina, 4k, 5k, mobile), it's just a lot of pixels to draw. You can try lowering the resolution. It won't look as sharp, but it will run faster.

 

var two = new Two({
  autostart: true,
  fullscreen:true,
  type: Two.Types.canvas,  
  
  ratio: 1 // devicePixelRatio
  
}).appendTo(document.body);

 

 

 

[OSUblake]

I also saw some errors. You need to wrap your calls with a function.

 

function changeStyleTo(style) {
  
  if(style == 'fill') {
    new TimelineMax()
      .to(prism.fill.stops[0], 0.3, {color: '#3850CF'}, 's1')
      .to(prism.fill.stops[1], 0.3, {color: '#00FFEE'}, 's1')
    
      // .call(prism.noStroke())
    
      .call(() => prism.noStroke())
  }
  
  if(style == 'stroke') {
    new TimelineMax()
      .to(prism.fill.stops[0], 0.3, {color: '#000'}, 's1')
      .to(prism.fill.stops[1], 0.3, {color: '#000'}, 's1')
    
      // .call(prism.stroke = linearGradient)
    
      .call(() => prism.stroke = linearGradient)
  } 
}

 

[athr11]

Thanks so much! @OSUblake?

Yes, I'm on a Retina display. Lowering the ratio helped a lot, 1.5 was a nice compromise between performances and quality. 

[OSUblake]

Yeah, sometimes it can be hard to come up with a good compromise for all the different devices and displays.

 

You could also make the ratio conditional so regular displays won't use a higher resolution.

 

var two = new Two({
  autostart: true,
  fullscreen:true,
  type: Two.Types.canvas,
  
  ratio: window.devicePixelRatio > 1 ? 1.5 : 1

}).appendTo(document.body);

 

[athr11]

Yeah, that would be even better! Thanks for the suggestion!