Proprieties added in the interaction panel won't work as intended

Hey everyone!

I’m creating an animation for a game dev company that wants a website in Webflow. We thought of adding some easter eggs in the team section that could be clicked and upon click, some images would be revealed.

I thought it would be fairly easy as I had it all laid out in my mind. Yet, as I created it, the properties in the live website are not working as they are in the interaction panel.

  1. The first problem is that the closed easter eggs start to rotate even though I set the rotation as an initial state and are also rotated using CSS in their class.

  2. On the second click (as I want to revert the animation), the opened easter egg on the left stays in the same place, not scaling to 0.2 and lowering its opacity. I have both those properties set up in the interaction panel correctly for both easter eggs. But, one of them (on the right) is working as intended, and the other is unaffected.

  3. Even more, if I start the animation by clicking on the right easter egg, it breaks down entirely.

Went over and over through the animation and tried to see what was wrong but I couldn’t figure it out. It might be some edge case that I’m missing or a big mistake I can’t see.

For now, the site is also live at this link. The animation might not be visible on the live link at some points as we get closer to publishing it on the main domain.

Thanks everyone!

Here is my public share link: LINK
(how to access public share link)