<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<h1>Scroll down</h1>
</section>
<section class="sticky">
<blockquote>"You should totally subscribe to my channel now"<span></span></blockquote>
<img id="office" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/office1.png">
<img id="building" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/sky.jpg">
<div id="box"></div>
</section>
<section>
<h1>Scroll up</h1>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script>
var tl = new TimelineMax({onUpdate:updatePercentage});
var tl2 = new TimelineMax();
const controller = new ScrollMagic.Controller();
tl.from('blockquote', .5, {x:200, opacity: 0});
tl.from('span', 1, { width: 0}, "=-.5");
tl.from('#office', 1, {x:-200, opacity: 0,ease: Power4.easeInOut}, "=-1");
tl.from('#building', 1, {x:200, opacity: 0, ease: Power4.easeInOut}, "=-.7");
tl2.from("#box", 1, {opacity: 0, scale: 0});
tl2.to("#box", .5, {left: "20%", scale: 1.3, borderColor: 'white', borderWidth: 12, boxShadow: '1px 1px 0px 0px rgba(0,0,0,0.09)'})
const scene = new ScrollMagic.Scene({
triggerElement: ".sticky",
triggerHook: "onLeave",
duration: "100%"
})
.setPin(".sticky")
.setTween(tl)
.addTo(controller);
const scene2 = new ScrollMagic.Scene({
triggerElement: "blockquote"
})
.setTween(tl2)
.addTo(controller);
function updatePercentage() {
//percent.innerHTML = (tl.progress() *100 ).toFixed();
tl.progress();
console.log(tl.progress());
}
</script>
@import url('https://fonts.googleapis.com/css?family=Arapey');
body {
margin: 0;
font-family: 'Arapey';
h1 {
font-size: 2em;
text-align: center;
margin-top: 30%;
}
}
section {
padding: 3em;
height: 100vh;
position: relative;
box-sizing: border-box;
blockquote {
font-size: 2.3em;
width: 30%;
margin-top: 17%;
position: absolute;
span {
width: 100%;
background: red;
display: block;
height: 5px;
margin-top: 20px;
}
}
img {
position: absolute;
}
img:nth-of-type(1) {
width: 40%;
right: 0;
top: 20%;
}
img:nth-of-type(2) {
width: 25%;
right: 40%;
top: 29%;
margin-top: 15%;
}
}
section:nth-child(odd) {
background: #f1f1f1;
}
.sticky {
background: white !important;
}
.percentage {
position: absolute;
bottom: 10px;
left: 10px;
}
#box {
width: 100px;
height: 100px;
position: absolute;
border: 5px solid lightgray;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
