My links are below for your reference.
In my nav bar, I have a badge in the center which contains the logo. The nav and badge have a fixed position. The goal is to have the badge spin like a wheel and blur mid-spin. During this blur, I am trying to replace the badge with the title of the next section of the landing page (styled in the same way as the logo). This combo of animations is set to be triggered when the following section scrolls onto the page.
The method I have chosen is to use an image of the badge and drop its opacity to 0% during the spin and blur animations revealing the next title behind.
I have also added all the same animations to the replacement badge with an opacity change that starts at 0 and ends at 100% instead.
The problem I am having is when I add the opacity change to the rest of the interactions the whole thing pretty much breaks. Prior to adding the opacity change the spin and blur work just fine on the logo running forward and back.
What am I doing wrong? Am I approaching this the wrong way or am I setting up the animations wrong? Any help would be greatly appreciated.
Here is my published site: