Streaming live at 10am (PST)

Possible to set certain objects as non-interactable for a period of time?


#1

Hi there,

I'm nearly done with my website but there is one issue I'm not sure how to address.

Here is the test link:

https://preview.webflow.com/preview/chris-cobb-s-marvelous-site?preview=ceae81be9071ddfc95a47b955659759a

When you click the phone to explode it, there are four pieces hidden underneath it that are interactive objects. They all have hover states and whatnot.

If, immediately after clicking the phone, you happen to have your mouse over one of these four objects, it will stop its movement out to the location I've designated, and perform its hover action. If you move the mouse away it will continue on to that location. Preferably, there would be no way to interrupt the movement of these objects. It shouldn't be possible to interact with them until they have stopped moving.

My preference would be to designate that these objects are non-interactive until after they have moved out to their designated position to the right of the phone.

Is there a way to do this with Webflow?

Thanks very much!

Chris


#2

Have you considered adding a blank div over the entire animation that prevents mouseover elements from triggering underneath? You can set it up to appear after clicking your first object then switch to display:none after the animation.


#3

McGuire -

Thanks for the suggestion! It works really well. I wasn't familiar enough with layered objects to come up with that as a solution on my own.

Thanks again!

Chris


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.