Tween animation with Scroll Magic

Question

I am very new to scroll magic, so only just getting used to scenes and tweens. So I have a pretty basic setup

<section id="sectionPlaceholder" class="section">
</section>
<section id="sectionOne" class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageOne">
      </div>
      <div class="col-md-6">
        <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageTwo">
      </div>
    </div>
  </div>
</section>

It is essentially two sections. The first one is just a placeholder section so you can see the animation trigger. The second section contains two images side by side. Each section has a min-height:100vh;

I created a replica of this on Codepen

As you can see, when you scroll down, the animation is triggered once you hit sectionOne. The animation is correct, I essentially want the images to scale in size at the same rate. What is incorrect is that the animation immediately runs all the way through as soon as you hit the section.

What I am after is this. Once you hit the section, the animation is triggered. As you scroll down the section, the image scales up. Once you hit the bottom of the section, the scale is hits 1.2. So in other words, the animation should complete as soon as you hit the bottom of the section, not run through immediately.

If you then scroll back up, the reverse happens.

Hope the above makes sense. What I am essentially looking for is the image scalling to be controlled by the scrolling, the more you scroll down, the larger the images get.

How could I achieve something like this?

Thanks

Answer 1

You can add a duration setting after the triggerElement, and you can for example use the window height as the duration, as I did in this example. In your case that would be

$(function() {
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
    triggerElement: "#sectionOne",
    duration: jQuery(window).height()
  })
  .setTween("#imageOne", 0.5, {scale: 1.2})
  .addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: "#sectionOne",
    duration: jQuery(window).height()
  })
  .setTween("#imageTwo", 0.5, {scale: 1.2})
  .addTo(controller);
});

See it in action here:

https://codepen.io/anon/pen/WZZWJX