Step and repeat interaction

Design help Animations & Interactions
1

Hi,

I am making an on-click interaction.
Some parts move 150 pixels to the left.
When a person clicks again it should move another 150 pixels and then again another 150 pixels and so on … is this possible within Webflow?

The only hack I could come up with was adding multiple buttons that hide and show to trigger different interactions for click 3+4 and 5+6 (I need it until 9th click)

Thanks for the help
Marcel

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

2

I don’t think it is possible. The way interactions are set up is you can specify the position of the element not that it should move by some number this or that way unfortunately.

3

Yeah I figured that much, shame that typing +150 pixels would not trigger such behaviour… would be great.

Guess I pass it on to the wishlist. And for now just trigger show hide buttons to make the next / previous steps

Thanks

4

What kind of site are you building where you need that many different click patterns?

Can you show an example or add your share link of what you are trying to do?

But @dram is right in that IX@ only allows 2 interaction points. 1st and 2nd.

5

Not Marcel but I can give you an example of what I struggled to achieve using normal IX:

I wanted to create an endlessly rotating block. It had to rotate exactly 90 degrees every time one hovered over it with the cursor (or tap it, no matter). Obviously I had to resort to complex show-hide behaviour for this instead of specifying that i want this element to rotate 90 degrees on hover and that’s it.

6

rotate 90 degrees in which direction? on X, Y, or Z?

7

Clockwise by Z axis. Does it matter?

8

Can you send me an example of what you are trying to do?

The Z axis is the axis that shows front to back. not left to right. Is that what you are trying to do? When someone hovers over this block that images or whatever rotate from back to front on an endless loop?

9

Oh, I already did it long time ago, it was just an example. Anyway, here it is. It is definitely Z axis :slight_smile:

10

Oh, I thought you were needing help. I get ya! Sorry bout that. :rofl: :+1: