Comparison Interaction
Posted on
December 27, 2020
Posted on
December 27, 2020
Before/After component built entirely using native Webflow interactions. With a few simple combinations of the following, you can build this easily too.
The trick here is using 2 same fixed size images with positioning absolute and overflow hidden. On desktop view, use 'Mouse Move Over Element' interaction to resize the foreground image to create the before and after kind of component without using any custom scripts. As on mobile, we take an easier approach by utilizing 'Mouse Click' interaction to make it mobile friendly.
If you need help in implementation, DM me. I'll be around.
Have fun cloning. 😄