Freebie: `Before & After` Image Slider

Whoa - love this one Michael! 

This is SO cool, Michael! 

Thanks for sharing Michael - this looks great.

Okay, I confess that I must be realllllly challenged.  I cannot replicate this at all. I downloaded the various versions, but I just have no concept of how to change things to make it work with my images.  Is there an actual tutorial?

He blogged about it, but basically...

1. You need a background image that will be either your before or after. It doesn't matter which.
2. You need an image for the opposite state that you will slice vertically into a bunch of smaller pieces. I believe Michael used 50(ish).  This is your masking image that you will change as a slider is moved, hiding or revealing slices based on which direction the slider is moving.
3. You will need a number of states for the masking image. Start with one that contains all of the slices assembled as a whole picture. This will help maintain alignment and make creating additional states easier. Don't put this as your "normal" state, be sure it is something else.
   1. Duplicate the state, rename it, and delete the right most slice of the image in the new state.
   2. Duplicate the state you just created, and delete the right most slice.
   3. Repeat until you reach the last state that should have 1 slice remaining.
   4. Delete everything out of the Normal state. The Normal State is now a layer that is empty that will show the whole base image.
4. Insert a slider.
   Make the total steps in the slider equal to the number of states for your masking image.
5. Add conditional triggers:
   Change state of (image) to (masking image state corresponding to slider's position) when the slider moves IF (Name of Slider's variable) is equal to (position corresponding to the desired state).

Sorry for the delayed response but I hope you (and others) find this useful.  

I also used a custom image for the slider thumb.

👍

Pro-Tip for anyone that doesn't want/know how to make all the slices or doesn't have the software for it... Instead of creating a number of slices and grouping them to form an image, you can instead use the crop tool to "remove" equal slices from the image.

On the image you want to "slice":

1. Select the picture and click edit states.
2. In the "Normal" state, insert a vertical line extending from above the picture to below it and align it to the left side of the picture. 
3. Copy and paste it a number of times. How many lines will you need? One more than the number of "image slices" that you want. 
4. Move the last copied line to align to the far right of your picture.
5. Select all of your lines and use the alignment tools to align them to top and then distribute horizontally. 
6. Duplicate the state and name it (something like state 1).
7. Delete the line on the far right.
8. Duplicate the sate and name it (something like state 2)
9. In the new state, use the crop tool and crop the right hand side to the guide line you inserted. Tools like to align to other shapes so the crop tool will kind of snap to the line when you get there. 
10. Delete the right most guide line and duplicate this State... repeat step 9. Keep repeating until you've created enough states that to slowly crop the image down to one slice.
11. Go back to each state and remove all remaining guidelines.
12. Go to the normal state and delete everything.

You now have an empty state (normal) and x number of states that are each missing one more "slice" than the prior one and you've achieved it using the crop tool and equally distributed lines as guides for cropping.

Thanks for sharing!

I have tried this every which way and cannot get it to work with the slider. Could someone help me? I do not know what I am doing wrong. : ( 

I don't know about anyone else, but my crop function keeps crashing storyline. I've already submitted a ticket. But that would be so much easier to use the crop function. :) 

Hello Moriah,

I took a different approach to creating this type of Before & After image slider.

I didn't like having to crop an image into a bunch of strips. I found it too time consuming.

In this example project, I set the after image as the slide background.

Then I added the before image onto the slide.

On top of the before image, there is a Reveal rectangle. I set the fill of this rectangle to: Slide background fill.

Then for each state of the Reveal rectangle, the width of the rectangle is increased.

With this approach, I no longer have to do any cropping. I use it as a template where all I have to do is swap out the slide background image (after image) and the before image.

Hi Russell, 

Thank you SO MUCH for sharing that with me. After working with Articulate, there is a bug that is crashing Storyline when I use my crop tool, so that option wasn't even on the table for me anymore. I so, so, so appreciate that you took the time to answer my question and show me how to do this in the future. I'm very grateful. Thank you! 

Sincerely, 

Moriah

I really wanted to be able to recreate this. I tried Michael Hinze's approach and I got some glitchy flashes that occur, like the base image is showing through unexpectedly as the slider moves. I tried Russel's approach but when I add my image to the slide background and shape it deteriorates. I tried editing the size of the image in photoshop following Articulate's best practice for adding images. 

attempt

Any thoughts on how I can fix either? 

Did you try the "crop in articulate" option detailed above? LINK

Thanks, Owen. I saw that break down but I was able to crop the image at 5 px sections by alt drag cropping the image in each state. I tried your process but have the same issue. I have attached the current version storyfile.

Hi Martin,

Your story size is too small. So the background image deteriorates because it is being stretched.

Try increasing your story size to 720 x 861. It will give you better results. 

You were right! Looks much better now. Thanks for your help.

I found a quick time saver for this type of effect.  However, you will need photoshop in order to do it.  Here's a quick run down on how to split an image into equal parts.  This only shows you how to split your image quickly.  You will need to follow Owen's instructions above to place the images into Storyline but at least it speeds up the process for you and you don't have to crop your picture multiple times.  

The step-by-step procedure can be found in the attached PDF document.  I threw this together using my Mac so the screen shots are on a Mac I'm afraid but the procedure is identical on a PC show you shouldn't have any issues.  If you do give me a shout.

Graham.

Hello!

I quickly wanted to share that we are no longer seeing this bug, Storyline crashes when editing the state of an image by cropping the image, in the latest version of Storyline 360.

I'd recommend using Storyline 360 (Build 3.61.27106.0) or later.

You can reach out to our Support Team in this discussion or privately in a support case. 

Thank you for sharing this! I was a little intimidated about slicing up the image into parts until I found this free tool. It took 5 seconds to get the slices. https://pinetools.com/split-image

The download and viewing of the example links don't work anymore. Does anyone have this download to share?

Try this link here to view and download here.