Streaming live at 10am (PST)

How to animate div blocks around a div block

Hello!
I tried building a site similar to one I found named “Pizzon” ( Pizzon | Pizza Restaurant HTML Template Preview - ThemeForest). I wanted to ask, how it is possible to recreate the animations in the slider with webflow.

I am currently facing issues with even arranging the divs since I’m not an expert and am only experienced with divs being in “straight” lines. Here is my attempt:

https://preview.webflow.com/preview/pizza-pepe?utm_medium=preview_link&utm_source=designer&utm_content=pizza-pepe&preview=1b0fb2648179f279c698b7bf6224d9ae&workflow=preview

Many thanks in advance!

Hi @Ilhom, Welcome to the Webflow community,

For placing divs in a more circular / irregular pattern, you can use position: relative.

image

Then for animating, when you have a slider item selected

image

you can customize the animation for this particular slide in the IX2 panel.

image

Animate position and opacity in slider in view

image

Reset position / opacity in Slider out of view

image

Rinse and repeat for each slide.

1 Like

Thank you very much for this extremely detailed answer. I am flattered to get such professional help.

Well, the only problem with changing the div to relative is that when I change the screen resolution, the div block goes out of it’s “original” position, as you can probably see in my read-only link. I think it has something to do with the “Relative to” setting but I can’t change it, I can only hover it. I can’t think of any other solution at the moment.

Again, thank you very much in advance!

Hi @Ilhom,

Actually, a mix of position absolute, VW and percentages would work better.
I made a shareable project for you that you can copy the structure.
https://preview.webflow.com/preview/pizza-slider-5e6f0b?utm_medium=preview_link&utm_source=designer&utm_content=pizza-slider-5e6f0b&preview=98283a1157d4707c5e864ec4068b2d47&workflow=preview

You can use percentages positioning on your ingredients they will anchor pretty well around the pizza.

1 Like

THANK YOU SO MUCH! It is perfect! I love the way you explained everything so detailed and even provided a website. All that is left now would be to make the Menu slider from the Example Website and the animations from the first slider but that should be doable.
Again, thank you very much!

1 Like