White Arrow icon
Back to all Elements

Before / After effect

A Before / After effect for photos, without any code. Only Webflow's interaction.

Because no code is involved, the 2 important things for this to work are:

  1. Structure / Hierarchy
  2. Precise Interaction

The Structure:

The "before image" (the one we place at the back) can be an image element or a background image of any DIV (.back-img-wrap)

The "after image" is a bit more complex. We need to make sure:

  1. The image is placed inside a div with a fixed width eg. 800px and height:100% (.fixed-width-div)
  2. We will place the fixed width div inside another div with no width, but with overflow:hidden (.overflow-hidden-div)

The 2 images wrappers needs to fit one on top of the other in the same div, so we will give both (.back-img-wrap & .overflow-hidden-div) position:absolute and the div that wraps all together (.ba-wrap) needs any kind of position other than static (so its direct children divs will conform to its position).

A nice extra could be an icon to indicate the left/right movement. Position it in the center of the wrapping div.

The Interaction:

Now comes the interaction... which we apply to the wrapping div, so it is our 'trigger'.
We will use 'While mouse move over element' and add actions only on the X axis.

  1. The .overflow-hidden-div size will start with width:0% and end with width:100%
  2. And the .move-icon will start with minus {-X/2} and end with {X/2} on the X axis (where X is the width of our wrapping div).

    In my case the wrapping div is 800, so-
    start: -400px
    end: 400px

    * I also added -50% on the Y axis because of the way I centered the icon element in the middle of the wrapping div.

Thats should do it :)
Clone away and play with it, for a better understand of what's goin' on...

Enjoy!

Preview:

browser mockup
Share:
Heart icon

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

CMS Autocomplete

Cloneable
CMS
JavaScript

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
Blue arrow iconWhite Arrow icon

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon