Share Posted October 22, 2018 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 comment Share on other sites More sharing options...
Share Posted October 22, 2018 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); 2 Link to comment Share on other sites More sharing options...
Share Posted October 22, 2018 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) } } 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 22, 2018 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. 2 Link to comment Share on other sites More sharing options...
Share Posted October 22, 2018 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); 5 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 22, 2018 Yeah, that would be even better! Thanks for the suggestion! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now