Jump to content
GreenSock

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

GSAP and Two.js - Canvas Performances

Recommended Posts

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

Link to post
Share on other sites

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

 

 

 

  • Like 2
Link to post
Share on other sites

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

 

  • Like 3
Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

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

 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

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

Link to post
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.

×