The example below shows how easy it is to animate DOM elements using Motion Slider Plugin.
<div id="howToLiveSlider" class="slider" style="height:300px" data-elem="motionslider" data-options="allowDrag:false;">
<div class="slidesHolder" style="height:300px" data-elem="slidesHolder" >
<div class="slide" style="height:300px" data-elem="slide">
<div class="vehicle" data-motion="{x:680; duration:4; ease:Linear.easeNone}">
<div class="body" data-motion="{y:-4; duration:0.25}, {y:4; duration:0.5}, {y:0; duration:0.25}" data-motion-options="repeat:3"></div>
<div class="bigWheel" data-motion="{rotation:780deg; ease:Linear.easeNone; duration:4}"></div>
<div class="smallWheel" data-motion="{rotation:1300deg; ease:Linear.easeNone; duration:4}"></div>
</div>
</div>
</div>
</div>
<div class="controlHolder">
<div class="seekControl" data-elem="seek" data-slider="howToLiveSlider" >
<div class="seekPath">
<div class="seekPercent" data-elem="percent"></div>
</div>
<div class="seekThumb" data-elem="thumb"></div>
</div>
<div class="autoplayOn" data-elem="autoplay" data-slider="howToLiveSlider" data-options="onCss:autoplayOn; offCss:autoplayOff"></div>
<div class="replay controlRight" data-elem="slideThumb" data-slider="howToLiveSlider" ></div>
</div>
.vehicle
{
width:234px;
height:222px;
position:absolute;
x:0;
top:30px;
border:4px solid transparent;
}
.body
{
background:url(../assets/body.png) no-repeat;
width:230px;
height:174px;
position:absolute;
left:0px;
top:0px;
overflow:hidden;
}
.bigWheel
{
background:url(../assets/big_wheel.png) no-repeat;
width:100px;
height:100px;
position:absolute;
left:3px;
top:120px;
overflow:hidden;
}
.smallWheel
{
background:url(../assets/small_wheel.png) no-repeat;
width:60px;
height:60px;
position:absolute;
left:174px;
top:159px;
overflow:hidden;
}
This example shows how different layers of div and images are animated to their position.
Each slide shows different ways of panning and zooming an image to create an elegant effect.
Each slide shows different ways of image tile animation and also features some text effects using SplitText plugin