Jump to content
Search Community

Choppy Performance on Firefox Stable/Yosemite w/BézierPlugin

GRAY GHOST test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

For some reason Firefox Stable on Mac Yosemite appears to be somewhat choppy when it comes to the orbs floating animation in the pen shared. Any suggestions for improving that sequence or thoughts on why Firefox is reacting the way it is?

 

My setup is very straight forward:

 

var bezier_topleft = [
  { x: 0, y: 0 },
  { x: 5, y: 12 },
  { x: -4, y: -24 },
  { x: 1, y: 24 },
  { x: 5, y: 0 },
  { x: 0, y: 0 }
];

tl.to(node, config.duration, { 
  bezier: {
    type: 'thru',
    values: config.bezier
  },
  onComplete: function() {
    fire();
  },
  ease: Linear.easeInOut
});

 

See the Pen b290d07abba6d68069171ba6b53383d9 by grayghostvisuals (@grayghostvisuals) on CodePen

Link to comment
Share on other sites

  • Solution

This definitely looks like a Firefox bug.  Usually Firefox can be shaky or show jank (lost frames) when animating elements in small increments. I have seen this even on Windows 7 and 8 (64-bit). You could try adding a slight rotation, so when your element animates it could add that to the transform matrix.

 

Maybe this could help, a slight rotation:

tl.to(node, config.duration, { 
  rotation: 0.01, // try adding this
  bezier: {
    type: 'thru',
    values: config.bezier
  },
  onComplete: function() {
    fire();
  },
  ease: Linear.easeInOut
});

Also Firefox is still working on its port of the SVG spec. here is their element implementation status: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_1.1_Support_in_Firefox

 

To test .. you can try another thing and if you wrap your SVG tag of the ORB in a regular div tag and then animate the movement of the orb with that div parent instead. Since with the DiV tag you will be able to animate that using 3D transforms, forcing hardware acceleration. Then when you test with the DIV tag you can try giving the tween a slight z (translateZ) value like z:0.01

 

SVG tags or their children do not support 3D transforms at this time with SVG version 1. So you really can't add any of the usual tips for tweaking 3d transforms for smoother buttery goodness. But SVG version 2 is on the horizon and will support 3D Transforms.

 

Hopefully the above can help.. if not, then you can always share your example with the Firefox Bugzilla team and file a bug report for what your seeing on Mac Yosemite.

 

File a Firefox bug here: https://bugzilla.mozilla.org/

 

:)

 

Resource:

SVG 2 supports 3D Transform: http://www.w3.org/TR/SVG2/

  • Like 4
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.
×
×
  • Create New...