Search code examples
jquerygsapscrollmagic

setTween does't work in ScrollMagic


I just started trying to figure out how GSAP and ScrollMagic work together, and as I follow up the source code in this cool guide site: http://scrollmagic.io/examples/basic/simple_velocity.html , it does not work in my codepen.

Here is mine with intention to scale up 'scene2' after the black line reaching top of the window: http://codepen.io/anon/pen/xZxZXm

This is how my js looks like:

var controller = new ScrollMagic.Controller
var scene1 = new ScrollMagic.Scene({
  triggerElement:'#pinned-trigger1',
  duration:$(window).height()-50,
  triggerHook:0,
  reverse:true
}).setPin('#pinned-element1');

//I cannot scale it up here.
    var scene2 = new ScrollMagic.Scene({triggerElement: "#scale-trigger",triggerHook:0, duration: 300})
                .setTween("#fstpin", {borderTop: "30px solid white", backgroundColor: "blue", scale: 4})


controller.addScene([
  scene1,
  scene2
]);

and html as following:

<main class="full-screen" role="main">
  <section class="full-screen blue ">
    <div id='scale-trigger'></div>
     <div id='fstpin'>
      <div id='scaled-element'>
        <h1>Basic Pin</h1>
        <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
      </div>
    </div>
  </section>

  <section id="pinned-trigger1" class="full-screen orange">
    <div id="pinned-element1">
     <p>This element will be pinned </p>
    </div> 
  </section>

  <section id="pinned-trigger2" class="full-screen red">
    <div id="pinned-element2">
      <p>This element should disapeared</p>
    </div>
  </section>

  <section class="full-screen blue">
    <div>
      <p>Section Four!</p>
    </div>
  </section>
</main>

Solution

  • Seems to me that you are missing the animation.gsap.js dependency in order for ScrollMagic to work with TweenMax.

    Here is your forked pen. Take a look at the Pen Settings by clicking on Settings from the menu (or by clicking on any of the gear icons present under each editing panels) and then look at the all the external JS files under the JavaScript tab.