Designing a before and after image slider
With Justinmind, you can create a before and after image slider in your prototypes.
To learn how, follow the steps below:
- Create a new mobile prototype. Drag two Image Widgets to the Canvas. In one, select the full color image from your files. In the other, select a black and white version of the image. Place these images on top of each other on the Canvas and make sure they’re the same size.
- Select the Color image, right-click on it and select “Group in Dynamic Panel”. Then, resize the Dynamic Panel until it’s only 1px wide.
- Now we’ll create the slider. Drag a Line widget and an Ellipse widget onto the Canvas below the images. Place the Ellipse on top of the Line and move it to the end of the Line on the left.
- Select the elements of the slider on the Canvas, right-click, and select “Group in Dynamic Panel”.
- You can also add a header at the top of the Canvas. Ours is from the iOS widget library. Additionally, you can add icons on the left and right of the slider to indicate which side is black and white and which is color.
Now we’ll make the slider interactive.
- Select the Ellipse and create an “On Drag” + “Move” event, selecting the Ellipse to be moved. For the move coordinates, select ‘With cursor’ for the X position. Change the Y position to ‘Current’. Make sure the ‘Constraint by parent container’ box is checked.
- Back in the Events palette, select the event you just created and click the ‘gear’ icon. Click ‘add action after selected’.
- In the Events dialog, create an “On Drag” + “Resize” event, selecting the Panel that contains the Color image to be resized. For the resize values, keep the Height fixed, but select ‘Calculated’ for the Width. Then, click the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
- In the Calculated Expression builder, follow these steps to create the expression:
1. Drag the Ellipse to the open space in the expression. From the term dropdown, select ‘Pos.X absolute’.
2. Drag the ‘Multiply’ function next to the Ellipse in the expression.
3. Type in ‘1.5’ in the open space that appears.
4. Drag the ‘Minus’ function next to the expression.
5. Finally, in the open space that appears, type in 1.5 times the distance in pixels from the edge of the Ellipse to the edge of the Canvas. In our example, the Ellipse is 49 pixels away from the edge of the Canvas, so we typed in 74 in the last open space.
And that’s it! Click ‘Simulate’ to see how your slider works.
You can download our example here.