I Need a Hero for a Slider Interaction

Michael Hinze has a post where he does something similar but you don't get the transition between two images. 

In this case, the slider is made of two images (1 and 2) and and isn't created in Storyline. One clue is that the images are in the webobject folder. Another is that when you inspect the page it shows that it's using an "Xray slider"

It's a cool effect, though.

Yep agree with Tom it is definitely a web object. There are lots of sliders out there that you could use for this.

As Matthew mentioned, the more image states and slider steps you add, the smoother the transition. If I remember correctly, this Before&After slider version here had about 90 states.

Wow, thank you to all of you!  I think in my example I used 35 different states and thought that was enough.  I was just curious about how it might work.  If one of you could just clarify this for me I would appreciate it.  If I understand what you are saying, that fish visual, then, is not created in storyline.  It's a web object that Vohra embedded from somewhere else. That's a feature I don't often think of using.   Thank you!  You are heroes to me!

Correct, the "fish slider" was done with some external tool and added to Storyline as a webobject.

Michael, thanks for posting your berlin wall.  It took me a little bit to see how you created your states for your before picture.  It looks like you sliced up your picture and used the slices to create the top picture.  I was just cropping my top picture.  I'll try your technique and see what happens.  I have time in the next couple days.  The hurricane is coming our way so if have power I'll have the time. :)

Thank you.  Looking at the tutorial now.

Thank you.  I watched your tutorial and downloaded the example file.  I appreciate it!

Glad you got the help you needed here on your Articulate project, now be safe down there! This hurricane looks like one to not mess with. 💚

hi Jodi, I'm a fan of your Metamorphosis story, and although it's probably too late, I was thinking how elegant it would be to just fade in your cat organs linearly left right like you did with the butterfly.  You'd just have to add triggers to remove the layers when sliding backwards, and the file size would be waaaaay smaller.   Lovely work.

Hi Richard,

Thank you for the idea.  I started playing around with it just so I could master the fade.  I did a little demo and think it just needs a few more states to make it transition more smoothly.  Eventually I'll find an application for this in one of my projects--this one was just for fun.  Below is how it turned out:

https://360.articulate.com/review/content/fa968000-5dcb-47cb-9775-7ae66482079a/review

Technically speaking you could replicate the slider's smooth sliding with a 0.01 step, but... you'd need 100 times more states O_o

What would be great is if Storyline had masks or something to partially reveal a layer...

Aman Vohra used an Image Comparison Slider to accomplish his "Anatomy of a Fish". 

The code can be found here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare 

Just add that as a web object and you're ready to go!

Thank you Alexandre and to everyone who helped me understand this. I really appreciate it.