Streaming live at 10am (PST)

Expanding Quadrants using Rollover Interactions

Hello,

I’m trying to create a 4 quadrant grid. On rolling over a quadrant, it expands and changes colour, pushing the other quadrants away. I’m testing it out using interactions except there’s a delay between the boxes that make it look off.
Here is a preview:
https://preview.webflow.com/preview/quad-test?utm_medium=preview_link&utm_source=dashboard&utm_content=quad-test&preview=10e01319fd8b8352676cf6ed939eb7d7&mode=preview

Here is a published link:
https://quad-test.webflow.io/

My question is, is there a way to create this without the delays via interactions?

Thanks in advance!

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

Hey, that’s pretty cool. I like where you are going with this.

Change the duration of the Blue box size animation to 0.5 to match the other quadrants. Also Change the easing of the red box to linear so it matches the other quadrants. Right now you have it set to “ease in”. If you make these changes, it will look more synced. I would actually set the easing of all the quadrants to “ease in” because I find linear to be a bit boring. Good luck! I hope this helps.

1 Like

That did it! Thank you so much for taking the time to look into it. Paying attention to the details goes a long way! :sweat_smile:

All the best! :slight_smile:

Welcome! Have a happy Webflowing!