UI Animating on Scroll: GSAP + ScrollMagic

index.html

<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.js

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());
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>

style.scss

@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;
}

ui-animating-on-scroll-gsap-scrollmagic.markdown

UI Animating on Scroll: GSAP + ScrollMagic

A Pen by designcourse on CodePen.

License.