Motion Slider

Before and After Image Reveal Example

This shows how this plugin can be easily customized to create a cool way to show a before and after image. In the examples below, it shows the original image and the final image after being edited to look like an old picture.
To use: Drag the handle to reveal the "after" image.

image
image
As an alternative to the first example, this example shows the step-by-step process instead of just showing the before and after image.
To use: Drag the scroller below or click/tap the text to jump to that step.
image
image
image
image
image
image
image
image
image
image
image
image
image
image
Original
Image
Recolor
Image
Add Image
Glow
Add Soft
Edges
Create
Grainy Look
Add
Scratches
Adjust
Levels
1
2
3
4
5
6
7
The HTML below is used to generate the slider above.
 HTML Simple Version 
<div id="simpleRevealSlider" class="slider" data-elem="motionslider" data-options="animDuration:0.5">
   <div class="slidesHolder" data-elem="slidesHolder" >
      <div class="slide" data-elem="slide" data-options="neverPlay:true">
         <img alt="image" src="#" data-src="assets/step1.jpg" class="stepImg"/>
         <div class="imgMask" data-motion="{width:100%; duration:1; ease:Linear.easeNone}">
            <img alt="image" src="#" data-src="assets/step7.jpg" class="stepImg"/>
         </div>
      </div>
      <div data-elem="controls">
         <div class="revealSeek" data-elem="seek">
            <div class="revealThumb" data-elem="thumb">
               <div class="revealLine"></div>
               <div class="thumbHolder">
                  <div class="thumbImg"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
 HTML Step Version 
<div id="stepRevealSlider" class="slider" data-elem="motionslider" data-options="allowDrag:false">
   <div class="slidesHolder" data-elem="slidesHolder" >
      <div class="slide" data-elem="slide" data-options="neverPlay:true">
         <img alt="image" src="#" data-src="assets/step1.jpg" class="stepImg"/>
         <div class="blurMask">
            <img alt="image" src="#" data-src="assets/step1_part_blur.jpg" class="blurImg"/>
         </div>
         <div class="stepHolder" data-motion="{type:from; autoAlpha:0; duration:1; ease:Linear.easeNone; delay:0}">
            <img alt="image" src="#" data-src="assets/step2.jpg" class="stepImg"/>
            <div class="blurMask">
               <img alt="image" src="#" data-src="assets/step2_part_blur.jpg" class="blurImg"/>
            </div>
         </div>
         <div class="stepHolder" data-motion="{type:from; autoAlpha:0; duration:1; ease:Linear.easeNone; delay:1}">
            <img alt="image" src="#" data-src="assets/step3.jpg" class="stepImg"/>
            <div class="blurMask">
               <img alt="image" src="#" data-src="assets/step3_part_blur.jpg" class="blurImg"/>
            </div>
         </div>
         <div class="stepHolder" data-motion="{type:from; autoAlpha:0; duration:1; ease:Linear.easeNone; delay:2}">
            <img alt="image" src="#" data-src="assets/step4.jpg" class="stepImg"/>
            <div class="blurMask">
               <img alt="image" src="#" data-src="assets/step4_part_blur.jpg" class="blurImg"/>
            </div>
         </div>
         <div class="stepHolder" data-motion="{type:from; autoAlpha:0; duration:1; ease:Linear.easeNone; delay:3}">
            <img alt="image" src="#" data-src="assets/step5.jpg" class="stepImg"/>
            <div class="blurMask">
               <img alt="image" src="#" data-src="assets/step5_part_blur.jpg" class="blurImg"/>
            </div>
         </div>
         <div class="stepHolder" data-motion="{type:from; autoAlpha:0; duration:1; ease:Linear.easeNone; delay:4}">
            <img alt="image" src="#" data-src="assets/step6.jpg" class="stepImg"/>
            <div class="blurMask">
               <img alt="image" src="#" data-src="assets/step6_part_blur.jpg" class="blurImg"/>
            </div>
         </div>
         <div class="stepHolder" data-motion="{type:from; autoAlpha:0; duration:1; ease:Linear.easeNone; delay:5}">
            <img alt="image" src="#" data-src="assets/step7.jpg" class="stepImg"/>
            <div class="blurMask">
               <img alt="image" src="#" data-src="assets/step7_part_blur.jpg" class="blurImg"/>
            </div>
         </div>
         <div class="stepBg" data-motion="{alpha:0.3; immediateRender:true}"></div>
         <div class="hidden-phone stepTextHolder">
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:0" data-motion="{autoAlpha:0.6; immediateRender:true}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">Original<br>Image</div>
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:1" style="left:104px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:0}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">Recolor<br>Image</div>
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:2" style="left:208px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:1}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">Add Image<br>Glow</div>
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:3" style="left:312px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:2}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">Add Soft<br>Edges</div>
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:4" style="left:416px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:3}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">Create<br>Grainy Look</div>
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:5" style="left:520px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:4}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">Add<br>Scratches</div>
            <div class="sliderText stepText" data-elem="slideThumb" data-options="time:6" style="left:624px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:5}">Adjust<br>Levels</div>
         </div>
         <div class="visible-phone stepTextHolder">
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:0" data-motion="{autoAlpha:0.6; immediateRender:true}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">1</div>
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:1" style="left:104px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:0}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">2</div>
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:2" style="left:208px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:1}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">3</div>
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:3" style="left:312px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:2}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">4</div>
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:4" style="left:416px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:3}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">5</div>
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:5" style="left:520px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:4}, {autoAlpha:0.2; duration:1; ease:Linear.easeNone;}">6</div>
            <div class="sliderText stepNumber" data-elem="slideThumb" data-options="time:6" style="left:624px;" data-motion="{autoAlpha:0.2; immediateRender:true}, {autoAlpha:0.6; duration:1; ease:Linear.easeNone; delay:5}">7</div>
         </div>
         <div data-motion="{target:#cbg; autoAlpha:0.6; immediateRender:true}" ></div>
      </div>
      <div data-elem="controls">
         <div class="controlHolder">
            <div id="cbg"></div>
            <div class="seekControl" data-elem="seek">
               <div class="seekBg"></div>
               <div class="seekThumb" data-elem="thumb">
                  <div class="revealThumbBg"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
 CSS 
.slider, .slide, .slideHolder
{
   width:727px; 
   height:490px;
   overflow:hidden;
}


.stepImg
{
   position:absolute; 
   left:0px; 
   top:0px;
   width:727px; 
   height:490px;
}


.imgMask
{
   width:0%; 
   height:100%; 
   left:0px; 
   top:0px; 
   position:absolute; 
   overflow:hidden 
}


.blurMask
{
   width:727px; 
   height:65px; 
   position:absolute; 
   left:0px; 
   top:425px; 
   overflow:hidden 
}


.blurImg
{
   position:absolute; 
   left:0px; 
   bottom:0px;
   width:727px; 
   height:490px;
}


.stepBg
{
   width:727px; 
   height:65px; 
   position:absolute; 
   left:0px; 
   top:425px; 
   overflow:hidden; 
   background-color:#000 
}


.stepHolder
{
   position:absolute; 
   left:0px; 
   top:0px; 
}


.stepTextHolder
{
   position:absolute; 
   left:0px; 
   top:425px;
}


.stepText
{
   width:104px; 
   height:65px;
   background-color:#000; 
   position:absolute; 
   left:0px; 
   color:#FFF; 
   font-size:15px; 
   padding-top:12px; 
}


.stepNumber
{
   width:104px; 
   height:65px; 
   background-color:#000; 
   position:absolute; 
   left:0px; 
   color:#FFF; 
   font-size:25px; 
   padding-top:12px
}


.revealSeek
{
   width:100%; 
   height:100%; 
   position:absolute; 
   top:0px; 
   left:0px; 
   overflow:hidden; 
   cursor:pointer 
}


.revealThumb
{
   width:1px; 
   height:100%; 
   position:absolute; 
   position:left:0px 
}


.revealLine
{
   width:2px; 
   height:100%; 
   position:absolute; 
   left:-1px; 
   top:0px; 
   background-color:#FFF 
}


.thumbHolder
{
   width:1px; 
   height:1px; 
   position:absolute; 
   top:50% 
}


.thumbImg
{
   width:62px; 
   height:32px; 
   background:url(../assets/reveal_thumb.png) no-repeat; 
   left:-31px; 
   top:-16px; 
   position:absolute 
}


.controlHolder
{
   height:30px;
   bottom:-10px;
   position:absolute;
   background:none;
   overflow:hidden
}


.seekControl
{
   position:absolute; 
   left:7.132682255845942%; 
   right:7.032682255845942%; 
   border-radius:0px;
   cursor:pointer;
}


.seekControl
{
   height:10px; 
   position:absolute; 
}


.seekBg
{
   width:100%; 
   height:10px; 
   left:0px; bottom:-10px; 
   position:absolute; 
   background-color:transparent 
}


.seekThumb
{
   width:16.66639614855571%;
   height:20px;
   background:url(../assets/step_reveal_thumb.png) no-repeat center center;
   position:absolute;
   border:none;
   border-radius:0px;
   top:0px;
}


.revealThumbBg
{
   width:100%; 
   height:10px; 
   position:absolute; 
   left:0px; 
   top:10px; 
   background-color:#999999
}


#cbg
{
   width:100%; 
   height:10px; 
   left:0px; 
   bottom:10px; 
   position:absolute; 
   background-color:#999999
}


.sliderText
{
   cursor:pointer;
   -webkit-user-select: none;
   -moz-user-select: none; 
   -ms-user-select: none; 
   -o-user-select: none;
   user-select: none; 
}

Other Examples of Motion Slider Plugin