Jump to content
Search Community

Animation Speed Inconsistency

bogieman987 test
Moderator Tag

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

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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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?

  • Like 1
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...