Hover animations conflicting with each other?! Soooo Confused. Please help!

Hey everyone!

This is my first time building an interaction and im stumped. I believe what I am doing is relatively complex (although I have no experience to tell me otherwise haha), I cant work out what is going wrong.

I am trying to achieve this: https://twitter.com/cuberto/status/1072069854197411840?s=20

I have broken down what I believe process of the animations are here:
https://photos.app.goo.gl/quswmJCKZrN1mmmYA

Read only link: https://preview.webflow.com/preview/define-alpha?utm_medium=preview_link&utm_source=designer&utm_content=define-alpha&preview=4ff89781d996585231c1cbcb2fcbe247&pageId=5ecc623323407ad7f7683739&mode=preview

The page I am working on is: Store

URL: https://define-alpha.webflow.io/store

The elements that are in question are:

  • Background product 1
  • Background product 2
  • Background product 3
  • Background product 4

I am stuck on the hovering animations.
If I follow this sequence, the animations individually work great:

  1. Hover into div block DIRECTLY from top or bottom of screen.
  2. Allow animation to complete.
  3. Hover DIRECTLY out of div block (move cursor directly off screen without interacting with any other div blocks).
  4. Allow animation to return to normal state.

If I try to move seamlessly between the div blocks (hovering cursor left and right), the animation only sometimes runs how it is supposed to, and after one or two animation ‘run throughs’ the whole thing seems to break and even the initial sequence I first outlined doesnt work.

My thinking is that maybe due to the div block animations all being inter-related and dependent on the state of one another there are conflicts? As in the ‘expansion’ sequence of one div block is conflicting with the ‘return to normal’ animations of the div block previously interacted with, effectively cancelling each other out?!

Obviously I am only at the very beginning of creating this whole animation, but I am stumped.

I might even be building it completely wrong?!

At this stage I would just like someone to help me with building the slide animations, although if someone would help me with the whole lot that would be awesome too hahaha.
Could someone please point me towards the solution?

Thank you so much for your help, I owe you a beer.

Reece.

1 Like