Animation Speed Inconsistency

[bogieman987]

Hi,

I'm using SVG to create buttons in a different shape rather than the usual rectangular button.

 

The problem is (at least the one that I'm working at the moment) is that the animation, whilst it works as intended, doesn't seem to run at the same rate across different browsers. Firefox, Edge and IE 11 run fine, as I like it to, Chrome and Opera on the other hand have a weird slowdown look to it.

 

Unfortunately, whilst I can use the :hover selector on the elements and do it that way, which grants me consistency, in order to have it so the hovered button stays on top of the rest I have to re-order the SVG elements to have it on the bottom, doing so seems to interrupt the :hover transition in some way on Firefox, Edge and IE 11 but works fine on Chrome and Opera.

 

There may be an error in how I've set it up in general, but it appears to be good enough.

 

Any help will be appreciated

Thanks

See the Pen jwyPwv by bogieman987 (@bogieman987) on CodePen

[Carl]

It looks like you still have transition code in the CSS in the SVG.

.svg-main {
        cursor: pointer;
        transition: 0.4s ease;
      }

 

remove that transition and the others. after doing so, Chrome should be speedier.

It looks like you were animating properties that the transitions were also trying to control.

[bogieman987]

Wow, just that one thing made a big difference haha, thanks, now I've got to figure out why the changing of the colours for both the hexagons and the text only happens when I mouse over the text :/ (Only on FF, Edge, IE 11 as far as I can tell)

 

Now this is more general CSS knowledge rather than GSAP but putting "fill: what-ever-colour" in ".svg-main:hover .hex" will change the colour of ".hex" when ".svg-main" is being hovered over right?