Trello Logo
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:

Share:

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

Round Scroll Indicator / Progress Bar

Cloneable
Interactions
Animation

A round scroll indicator mad with Webflow elements and interactions

Read more
White Arrow icon

Pass Parameters

Cloneable
Code

Pass input fields parameters and add them to the destination URL.

Read more
White Arrow icon

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more
White Arrow icon