If you're looking to easily create a slideshow, their examples can be quite helpful. Simply copy and paste the code below into an html page and customize the javascript and css for each slide according to your preferences. Ensure that you include all the necessary libraries such as jquery, TweenMax, ScrollMagic, and animation.gsap. I have provided direct links for easy access but you can also find them in your scrollmagic download.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
<style>
body {
font-family: "Source Sans Pro", Arial, sans-serif;
background-color: #c7e1ff;
font-size: 13px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
margin:0;
padding:0;
color:#fff;
}
body, html {
height: 100%
}
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
}
.panel {
height: 100%;
width: 100%;
position: absolute;
text-align:center;
}
b {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position:relative;
font-size:30px;
}
</style>
</head>
<body>
<div style="height:100%;background:#000;text-align:center;"><b>OUTSIDE OF PIN CONTAINER</b></div>
<div id="pinContainer">
<div class="panel first" style="background:#111;">
<b>FIRST SLIDE</b>
</div>
<div class="panel second" style="background:#333;">
<b>IN FROM LEFT</b>
</div>
<div class="panel third" style="background:#555;">
<b>IN FROM RIGHT</b>
</div>
<div class="panel fourth" style="background:#777;">
<b>IN FROM TOP</b>
</div>
<div class="panel fifth" style="background:#999;">
<b>IN FROM BOTTOM</b>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script>
$(function () { // wait for document ready
// initialize
var controller = new ScrollMagic.Controller();
// define panel movements
var wipeAnimation = new TimelineMax()
.fromTo("div.panel.second", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone}) // in from left
.fromTo("div.panel.third", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}) // in from right
.fromTo("div.panel.fourth", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone}) // in from top
.fromTo("div.panel.fifth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}); // in from bottom
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "300%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addTo(controller);
});
</script>
</body>
</html>
I have personally tested this on my browser and verified its functionality.