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:
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.
Then for animating, when you have a slider item selected
you can customize the animation for this particular slide in the IX2 panel.
Animate position and opacity in slider in view
Reset position / opacity in Slider out of view
Rinse and repeat for each slide.
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.
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!