Interactions - How to achieve this using Blocs?

Hi folks!

Today I had some time to kill and surfing the net I stumbled across two sites with really nice interactions.

  1. Banking-Start-up Responsive Template | Wix Studio

If you scroll down a screen, you have boxes scrolling up on the right side and stopping over each other, while the left half of the screen remains fixed. After the last box is in the top position, both halves scroll to the next screen.

  1. https://www.revolut.com

Scrolling down, the hero image is kind of split and there is a zoom into the next screen.

Any ideas how these effects could be achieved in blocs?

1 Like

1 is easily done in Blocs. You won't even need 6.

Making use of position sticky and the top edge. It’s almost NoCode, with the small exception of having to unset the overflow on the page container that Blocs adds. This breaks sticky positioning. I have posted about this more than once on the forum. But its easy to solve.

Experiment, and get a feel for how position sticky works, best way to learn. I used 2 columns here.

2… more complex.

Much easier using another app :smiley:

2 Likes