Before vs After Image Overlay

Ask the community
,
1

Hi all. Looking for a little guidance.

I am looking to put some before/after photos on the site I am working on and would like to code one of those effects that shows the a “before” image and an “after” image with a grabbable, movable vertical line - on the left of the line is the before image and on the right of it is the after image - and moving the line reveals more of one or the other. The images them selves are stationary…the line just reveals more/less of one or the other.

I can see apps that will do this but I am wondering if anyone can think of an approach that would allow this just using Velo. Not looking for code - just an approach, if anyone out there has built something like this before.

Thanks,
Simon.

2

Maybe using wix-animation?
Problem: Drag&Drop-functionality.

So just forget your idea to try to solve it just using velo-elements, i have never seen any possibility for that.

  1. https://www.wix.com/velo/forum/coding-with-velo/adding-a-drag-drop-functionality-with-iframe-on-wix

  2. https://www.wix.com/velo/forum/coding-with-velo/drag-and-drop-any-element-on-the-live-website

  3. https://www.wix.com/velo/forum/coding-with-velo/drag-and-drop-fill-in-the-blanks

All of these posts will tell you the same.

SOLUTION-1 —> CUSTOM-ELEMENT
SOLUTION-2 —> HTML-COMPONENT

Good-Luck!