Hi again: this is same problem I already described in an earlier post and I really need some help to get this handled. I’m rebuilding the site as new project and the same issue is coming up again.
I have a a hamburger menu consisting of one div-wrapper for three lines.
On click the two outer lines merge in the middle and each rotates 315° in opposite directions. The middle line fades out.
On second click the process is supposed to be reversed.
Looks likes this in the interaction menu:
Looks good doesn’t it?
Yet the result doesn’t look good, neither in preview mode nor on the live site: (
The gif is from Firefox, where the issue is the most apparent.
In Safari and Chrome, it may take a couple of clicks until it there is a noticeable deviation.
However, even in the cases where it looks normal, a closer look at the site-code reveals that the code isn’t what it is supposed to be…
as you can see in the last picture, the first hamburger has the rotate-Z put to 0.264°, the third one to -1.178°. Both values should be at 0.0deg as specified. The deviations seem random.
Here is another pic with a another deviation:
I tried using super small values, like 0.001° instead. This this to lessen the issue a little, but it doesn’t fix it.
I just can’t figure this out. What am I missing?
Would really appreciate if someone could take a look at it.
I recreated the issue in a simple setting here because I thought maybe the zillion of interactions I had going in on the other site are somehow the cause of this. They aren’t. But it’s possible to make things worse.
The left hamburger features an exact replication of the interactions from my site. It has the same issues as my site.
The lime colored hamburger has some additional stacked hover interactions: Rotations on the y-axis. Very good way to intensify the issue. Though I’m not clear on how or why this happens.
the left button is animated with GSAP, which can also handle simultaneous hover 3d animations as you can see. Not that it looks terrible exciting here. But it works. The middle button is pure webflow animation without any extra hover hurdles thrown in. It features the aforementioned deviations.
The green button is pure webflow again, and it should be doing the same as first one. oh well…
A couple of notes:
first, the orange webflow animated button also skips doing the rotations fully on the first click. It acts as if the first action would to rotate each line to 45 deg (specified are 315°). Only on the second click and from then on it goes all the way. Weird.
second, GSAP, too, suffers from performance issues in firefox. you can see how incredible smooth the things run in chrome. then in firefox its seems to be jerky in comparison. I tried fixing it, but so far no dice.
But at least it does what it’s supposed to do and I’m a happy camper
So not sure what causes the issue, but you might want to look into that
