Struggling with slider interactions!

Design help General
1

Hi guys,

I’m trying to setup a website with slider interactions so various sections are clickable and will slide across when clicked on and push out the other sections. In Webflow, it appears that if you have something that slides (as an animation) it won’t automatically push other elements of the website around as it moves, even if they are in a flexbox together.

So, I tried to fix this by animating all the sections, so if I have one section that slides across then I made another animation on the section next to it that also slides across so it looks as though each section is reacting to the other.

Problem is it’s really quite buggy (as you can see in my shared link). It’s also not ideal as I wanted sections to be able to expand (or slide) from where they end up on the page so when I slide something over from the left and it goes to the right, if I slide it over again it’ll come from the left although the actual element I’ve clicked is on the right.

If you look at the share link, the blue and red sections should always be clickable and will shrink onto the right when you open up a link from the menu on the left. They will always be clickable, even in their smaller state.

It’s kind of complicated but hopefully someone can figure out what I mean and offer some sort of guidance! It’s driving me crazy!

Thank you, share link below.

Here is my site Read-Only: https://preview.webflow.com/preview/tailor-inc?preview=15b4551a2179357a69bbb4b10d9419d4

2

Hi Paragon,

What exactly is the problem, because the animation worked for me when clicked. Is your problem getting the blocks to return to original position?

The site looks really really good!

3

Hi Gary, thanks for taking a look! The sliders aren’t really smooth, for example when you click on Design, and then ‘about us’ (on the left menu) the design slide animates nicely but then the about us slide waits for a while and then just appears really quickly… There’s no consistency :frowning:

I’d also really like it if when you click ‘about us’ and it pushes the blue and red sections over to the right. Then when you click the red section it would animate and slide over from the right. Rather than the left as it currently does…

4

  1. Gotcha. Well the sudden jerky movement needs a different ‘Easing’ type and timing. Try Ease with 0.75 to start. Now IX1 has the best one, which is ‘Ease Out Circ’. Don’t know why it’s not in IX2. If the basic ease isn’t right, go with Circ type easings and slow it down.

  2. To get divs to push each other during animation, you need to simply put them in the same parent div. They need to relate to each other. After that, during the animation, lets say you slide the red background right 100px. Then you can slide the blue background 100px. They both will move together.
    The parent div can be set to Flex, children can be block, set to expand.

5

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