Is there setting for anchoring based for div?

Design help Animations & Interactions
1

Hi all,

Wondering if any of you webflow ninja can help me with this…

landing%20mockup%20blank
landing%20mockup%20blank1140×641 392 KB

I’m trying to make a landing page that divided into 3 columns ( 3div), while on hover inside each div, that div will expand AND pushed the other 2. ( see attachment ).

I structured them as this

  1. wrapper ( for 3 div ) flex horizontal
  2. Colum left
  3. Column middle
  4. Column right

I’ve tried with animation on hover, but the problem I can set the anchor-based for each div ( ie: on left div, the expansion should start from left, the right div expand from right, and middle div expand from the center.

  • also, tried set the wrapper to relative, and made the 3 div inside as absolute ( so the have anchor-based ) but still can’t achieve the result.

Cheers

Dicky Jiang

Here is my public share link: https://preview.webflow.com/preview/baju-fluffy?utm_medium=preview_link&utm_source=designer&utm_content=baju-fluffy&preview=f349f760e0c45ce8d48e116b39917374&mode=preview]
(how to access public share link)

2

Can you share your read only link please? This way we can help you right inside your project.

4

Hi @aaronocampo

Read only link added

thank you

DJ

5

Is this what you’re looking for?

6

Oh Man !

exactly !!
teach me … shifu

DJ

7

Here’s the preview link:

https://preview.webflow.com/preview/growing-divs?utm_medium=preview_link&utm_source=dashboard&utm_content=growing-divs&preview=b04849fa7dd685a1d207211c6ddc7c5b&mode=preview

Let me know if you can do it with this or if you need me to make the project clonable.

1 Like
8

@aaronocampo

Thank you !!
Sometimes with the so many possibilities available with webflow, I tend to overthink the solution. while it can be done with basic functionality.

again thank you for your time and quick response, you’re the man!

Cheers

DJ

1 Like
9

I’m glad I was able to help!

1 Like