This example shows how each slide animates image tiles and also features some text effects using SplitText plugin
<div id="splitTextImageSlider" class="slider" data-elem="motionslider" data-options="animDuration:0.5">
<div class="slidesHolder" data-elem="slidesHolder" >
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/cheeseboard.jpg" class="cheeseBoard full" data-motion="{display:none; immediateRender:true}, {y:-122px; ease:Linear.easeNone; duration:7}"/>
<img alt="image" src="#" data-src="assets/cheeseboard_blur.jpg" class="cheeseBoard blur" data-motion="{y:-122px; ease:Linear.easeNone; duration:7}"/>
<img alt="image" src="#" data-src="assets/cheeseboard.jpg" class="cheeseBoard split" data-elem="splitImage" data-options="rows:1; cols:6; overlap:1; useCssSize:true" data-motion="{y:-122px; ease:Linear.easeNone; duration:7}"/>
<div class="descHolder" data-motion="{alpha:0; y:90; immediateRender:true}, {alpha:1; y:0; duration:0.5; delay:1.5}">
<img alt="image" src="#" data-src="assets/chesseboard_blur_part.jpg" class="cheeseBoardBlur" data-motion="{alpha:0; immediateRender:true; display:none}, {y:-122px; ease:Linear.easeNone; duration:7}"/>
<div class="descBg" data-motion="{alpha:0.5; immediateRender:true}"></div>
<div class="titleText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; duration:0.75; stagger:0.25; delay:2.25}">CHEESE PLATTER</div>
<div class="descText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; y:0; duration:0.5; stagger:0.0625; delay:3.25}">Cheese platter served with water biscuits and wheat crackers</div>
</div>
<div data-motion="{target:.cheeseBoardBlur; alpha:0.95; duration:0.75; display:block; delay:2}"></div>
<div data-motion="{target:.cheeseBoard; find:div; rotationX:-100deg; type:staggerFrom; sort:reverse; alpha:0; duration:0.75; stagger:0.125; ease:Power1.easeOut}, {target:.cheeseBoard.blur; display:none; duration:0.0; immediateRender:false}, {target:.cheeseBoard.full; display:block; duration:0.0; immediateRender:false}, {target:.cheeseBoard.split; display:none; duration:0.0; immediateRender:false}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; immediateRender:true }"></div>
</div>
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/bread.jpg" class="bread full" data-motion="{display:none; immediateRender:true}, {scale:1.1; transformOrigin:75% 100%; ease:Linear.easeNone; duration:7}"/>
<img alt="image" src="#" data-src="assets/bread_blur.jpg" class="bread blur" data-motion="{scale:1.1; transformOrigin:75% 100%; ease:Linear.easeNone; duration:7}"/>
<img alt="image" src="#" data-src="assets/bread.jpg" class="bread split" data-elem="splitImage" data-options="rows:8; cols:1; overlap:1; useCssSize:true" data-motion="{scale:1.1; transformOrigin:75% 100%; ease:Linear.easeNone; duration:7}"/>
<div class="descHolder" data-motion="{alpha:0; y:90; immediateRender:true}, {alpha:1; y:0; duration:0.5; delay:1.5}">
<div class="breadBlurHolder" data-motion="{ alpha:0; immediateRender:true}, {scale:1.1; transformOrigin:75% 100%; ease:Linear.easeNone; duration:7}">
<img alt="image" src="#" data-src="assets/bread_blur_part.jpg" class="breadBlur" data-motion="{alpha:1; immediateRender:true}" />
</div>
<div class="descBg" data-motion="{alpha:0.5; immediateRender:true}"></div>
<div class="titleText" data-elem="splitText" data-options="charsClass:chars; position:absolute" data-motion="{find:.chars; type:staggerFrom; alpha:0; y:20; duration:0.5; stagger:0.0625; delay:2; }">CRUSTY BREAD</div>
<div class="descText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; y:20; duration:0.5; stagger:0.08; delay:2.75; }">Freshly baked crusty round loaf of bread on a wooden bread board</div>
</div>
<div data-motion="{target:.bread; find:div; type:staggerFrom; alpha:0; duration:0.25; stagger:0.125; x:100; sort:reverse; ease:Quad.easeOut}, {target:.bread.blur; display:none; duration:0.0; immediateRender:false}, {target:.bread.full; display:block; duration:0.0; immediateRender:false}, {target:.bread.split; display:none; duration:0.0; immediateRender:false}"></div>
<div data-motion="{target:.breadBlurHolder; alpha:1; duration:0.75; delay:1.75}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; immediateRender:true }"></div>
</div>
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/family_quiche.jpg" class="familyQuiche full" data-motion="{display:none; immediateRender:true}, {type:from; scale:1.2; transformOrigin:0% 50%; ease:Linear.easeNone; duration:9}"/>
<img alt="image" src="#" data-src="assets/family_quiche_blur.jpg" class="familyQuiche blur" data-motion="{type:from; scale:1.2; transformOrigin:0% 50%; ease:Linear.easeNone; duration:9}"/>
<img alt="image" src="#" data-src="assets/family_quiche.jpg" class="familyQuiche split" data-elem="splitImage" data-options="rows:4; cols:4; overlap:1; useCssSize:true" data-motion="{type:from; scale:1.2; transformOrigin:0% 50%; ease:Linear.easeNone; duration:9}"/>
<div class="descHolder" data-motion="{alpha:0; y:90; immediateRender:true}, {alpha:1; y:0; duration:0.5; delay:1.75}">
<div class="familyQuicheBlurHolder" data-motion="{ alpha:0; immediateRender:true}, {type:from; scale:1.2; transformOrigin:0% 50%; ease:Linear.easeNone; duration:9}">
<img alt="image" src="#" data-src="assets/family_quiche_blur_part.jpg" class="familyQuicheBlur" data-motion="{alpha:1; immediateRender:true}" />
</div>
<div class="descBg" data-motion="{alpha:0.5; immediateRender:true}"></div>
<div class="titleText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; duration:0.5; stagger:0.25; delay:3; }">WHOLE FAMILY QUICHE</div>
<div class="descText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; duration:0.5; stagger:0.08; delay:4.25;}">Whole family quiche with egg, bacon and tomato on a wooden chopping board</div>
</div>
<div data-motion="{target:.familyQuiche; find:div; type:staggerFrom; alpha:0; duration:0.75; scale:0; stagger:0.0625; ease:Quad.easeOut; sort:43223;}, {target:.familyQuiche.blur; display:none; duration:0.0; immediateRender:false}, {target:.familyQuiche.full; display:block; duration:0.0; immediateRender:false}, {target:.familyQuiche.split; display:none; duration:0.0; immediateRender:false}"></div>
<div data-motion="{target:.familyQuicheBlurHolder; alpha:1; duration:0.75; delay:2.25}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; immediateRender:true }"></div>
</div>
<div class="slide" data-elem="slide">
<img alt="image" src="#" data-src="assets/bolognese_meal.jpg" class="bologneseMeal full" data-motion="{display:none; immediateRender:true}, {y:122px; ease:Linear.easeNone; duration:9}"/>
<img alt="image" src="#" data-src="assets/bolognese_meal_blur.jpg" class="bologneseMeal blur" data-motion="{y:122px; ease:Linear.easeNone; duration:9}"/>
<img alt="image" src="#" data-src="assets/bolognese_meal.jpg" class="bologneseMeal split" data-elem="splitImage" data-options="rows:4; cols:4; overlap:1; useCssSize:true" data-motion="{y:122px; ease:Linear.easeNone; duration:9}"/>
<div class="descHolder" data-motion="{alpha:0; y:90; immediateRender:true}, {alpha:1; y:0; duration:0.5; delay:1.75}">
<img alt="image" src="#" data-src="assets/bolognese_meal_blur_part.jpg" class="bologneseMealBlur" data-motion="{alpha:0; immediateRender:true}, {y:122px; ease:Linear.easeNone; duration:9}"/>
<div class="descBg" data-motion="{alpha:0.5; immediateRender:true}"></div>
<div class="titleText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; scale:0.25; y:-10; duration:1; stagger:0.25; delay:3;}">SPAGHETTI BOLOGNESE</div>
<div class="descText" data-elem="splitText" data-options="wordsClass:words; position:absolute" data-motion="{find:.words; type:staggerFrom; alpha:0; x:-20; duration:0.5; stagger:0.125; delay:4.25;}">Italian spaghetti bolognese with beef mince and grated cheese</div>
</div>
<div data-motion="{target:.bologneseMeal; find:div; type:staggerFrom; alpha:0; duration:1; y:-490; stagger:0.0725; ease:Quad.easeOut; sort:reverse;}, {target:.bologneseMeal.blur; display:none; duration:0.0; immediateRender:false}, {target:.bologneseMeal.full; display:block; duration:0.0; immediateRender:false}, {target:.bologneseMeal.split; display:none; duration:0.0; immediateRender:false}"></div>
<div data-motion="{target:.bologneseMealBlur; alpha:0.95; duration:0.75; delay:2.2}"></div>
<div data-motion="{target:'.titleText, .descText'; alpha:0.9; immediateRender:true }"></div>
</div>
<div data-elem="controls">
<div class="circleThumbHolder" style="bottom:auto; top:45px">
<div class="circlePosHolder">
<div class="circleThumb cThumb1" data-elem="slideThumb" data-options="index:0;"> </div>
<div class="circleThumb cThumb2" data-elem="slideThumb" data-options="index:1;"> </div>
<div class="circleThumb cThumb3" data-elem="slideThumb" data-options="index:2;"> </div>
<div class="circleThumb cThumb4" data-elem="slideThumb" data-options="index:3;"> </div>
</div>
</div>
</div>
</div>
</div>
.slider, .slide
{
width:735px;
height:366px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
.descHolder
{
position:absolute;
width:735px;
height:80px;
left:0px;
bottom:0px;
overflow:hidden;
}
.descBg
{
width:735px;
height:90px;
background-color:#7F4F27
}
.titleText, .descText
{
font-family: Arial, Helvetica, sans-serif;
line-height:1;
display:block;
font-weight:bold;
text-align:center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width:705px;
position:absolute;
text-align:left;
padding:15px;
}
.titleText
{
left:0px;
top:0px;
color:#E5E18F;
font-size:24px;
}
.descText
{
left:0px;
top:30px;
color:#CCCCCC;
font-size:14px;
}
.cheeseBoard, .cheeseBoardBlur, .bread, .familyQuiche, .familyQuicheBlur, .bologneseMeal, .bologneseMealBlur
{
position:absolute;
width:735px;
height:auto;
-ms-transform: rotate(0.01deg);
-webkit-transform: rotate(0.01deg);
transform: rotate(0.01deg);
}
.cheeseBoard
{
left:0px;
top:0px;
height:489px;
}
.cheeseBoardBlur
{
position:absolute;
left:0px;
top:0px;
height:204px;
}
.bread, .familyQuiche
{
left:0px;
bottom:0px;
height:366px;
}
.breadBlurHolder, .familyQuicheBlurHolder
{
width:735px;
height:366px;
left:0px;
bottom:0px;
position:absolute;
}
.breadBlur, .familyQuicheBlur
{
position:absolute;
left:0px;
bottom:0px;
width:735px;
height:104px;
}
.bologneseMeal
{
left:0px;
bottom:0px;
height:489px;
}
.bologneseMealBlur
{
position:absolute;
left:0px;
bottom:0px;
height:204px;
}
.circleThumbHolder
{
width:100%;
height:0px;
position:absolute;
bottom:0px;
left:0px
}
.circlePosHolder
{
position:absolute;
width:0px;
height:30px;
left:50%;
bottom:0px;
}
.cThumb1
{
right:28px
}
.cThumb2
{
right:2px
}
.cThumb3
{
left:2px
}
.cThumb4
{
left:28px
}
This is a simple demo that shows how easy it is to animate DOM elements using Motion Slider Plugin.
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.
