Animate/create scene within a pinned scene

[ericnguyen23]

I've read up a few examples but haven't found one that works.

Basically trying to pin a div, and have the child divs within it animate while users scroll, and pin will be released once all child divs have finished animating.

Here's what I'm trying however the .setTween opacity animation doesn't seem to work.

<div id="pinned-scene">
  <div class="scene" id="scene1">Scene 1</div>
  <div class="scene" id="scene2">Scene 2</div>
  <div class="scene" id="scene3">Scene 3</div>
  <div class="scene" id="scene4">Scene 4</div>
  <div class="scene" id="scene5">Scene 5</div>
</div>

// pin scene
new ScrollMagic.Scene({duration: 1000, triggerElement: "#pinned-scene"})
.setPin("#pinned-scene")
.addTo(controller);

// animation scene
new ScrollMagic.Scene({triggerElement: "#pinned-scene", offset: 200})
.setTween("#scene", {opacity: 0.5})
.addTo(controller);

[sharkfin009]

Hi Eric! I have also been working on getting familiar with ScrollMagic , and so I used your code as an exercise. I have managed to make it work here https://codepen.io/Sharkfin007/pen/KbmwMj?editors=0010

There are a few annoying things I would love to understand better , but I will get to those. These where the issues I had to resolve to make it work: 1 There is no need for 2 scenes in this case, one can simply pin and tween in one. 2 setTween has to call a TweenMax tween, with duration included. Also TweenMax must be installed or linked to with a CDN, as well as animation.gsap. both latest versions! this got me stuck for a while. I had them installed properly for my local dev setup but not in Codepen. 3 There was no "scene" id in your HTML, only scene 1 2 3 etc 4 oh and I made the body 5000px tall so there was room to scroll...

I am not sure why pinning the element puts it halfway down the page. Also the tween is not starting from the default value for some reason. Would love to know why:) Will keep fiddling All the best Ben

[ericnguyen23]

Hi Eric! I have also been working on getting familiar with ScrollMagic , and so I used your code as an exercise. I have managed to make it work here https://codepen.io/Sharkfin007/pen/KbmwMj?editors=0010

There are a few annoying things I would love to understand better , but I will get to those. These where the issues I had to resolve to make it work: 1 There is no need for 2 scenes in this case, one can simply pin and tween in one. 2 setTween has to call a TweenMax tween, with duration included. Also TweenMax must be installed or linked to with a CDN, as well as animation.gsap. both latest versions! this got me stuck for a while. I had them installed properly for my local dev setup but not in Codepen. 3 There was no "scene" id in your HTML, only scene 1 2 3 etc 4 oh and I made the body 5000px tall so there was room to scroll...

I am not sure why pinning the element puts it halfway down the page. Also the tween is not starting from the default value for some reason. Would love to know why:) Will keep fiddling All the best Ben

Thanks Ben, can you think of any reason why setTween method doesn't work on my end? .setTween(TweenMax.to("#scene1", 500,{opacity:0}))

EDIT: Never mind, it was a silly mistake; didn't ad the library animation library.

[sharkfin009]

awesome, glad you got it working. Let me know anytime you get stuck... this stuff is so finicky