ScrollMagic pin is not working in TimelineMax

Question

I am new to ScrollMagic but loving it.

So I have a Timeline which bring together the parts of an airplane together to form an airplane.I intend to change the tweened parts of the airplane to a single image of the entire plane and then pin the single image.

I have managed to get the parts of the plane together but not sure how to proceed.

Any clue how to achieve this?

This is the fiddle of what I've achieved till now

HTML -

<section class="intro-container"></section>
<section class="airplane-container">
    <div id="plane-left-wing"></div>
    <div id="plane-right-wing"></div>
    <div id="plane-propeller-left"></div>
    <div id="plane-propeller-right"></div>
    <div id="plane-body"></div>
    <div id="plane-tail"></div>
</section>
<!--/airplane-container-->

JS -

var controller = new ScrollMagic.Controller();
    var airplane_tween = new TimelineMax()
                .to("#plane-left-wing", 1, {left:"50%" , top:"-150px"  },0)
                .to("#plane-right-wing", 1, {right:"50%" , top:"-150px"},0)
                .to("#plane-body", 1, {top:"-250px"},0)
                .to("#plane-tail", 1, {top:"-404px" },0.5)
                .to("#plane-propeller-left", 1, {left:"50%" , top:"-230px" },0.5)
                .to("#plane-propeller-right", 1, {right:"50%" , top:"-230px"},0.5);
var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 300})
                .setTween(airplane_tween)
                // .setPin("#airplane-pin")
                .addIndicators({name: "airplane"}); // add indicators (requires plugin)
// Add Scenes to ScrollMagic Controller
controller.addScene([
  scene1
]);

CSS -

* {
    margin: 0;
    padding: 0;
}

html, body {
  margin: 0;
  height: 100%;
  background: #ededed;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a.active {
  color: #ededed;
}


.intro-container {
  width: 100%;
  height: 700px;
  float: left;
  background: #ffd134;
}
.airplane-container {
  width: 100%;
  /*height: 900px;*/
  overflow: hidden;
  float: left;
  background: #678ecf;
  background: rgba(103, 142, 207, 0.9) url(../images/top-view.jpg) no-repeat;
}
#plane-left-wing {
  margin: 300px auto auto -252.5px;
  position: relative;
  float: left;
  width: 231px;
  height: 92px;
  background: url(../images/plane-left-wing.png) no-repeat;
}

#plane-right-wing {
  margin-top: 300px;
  margin-right: -252.5px;
  position: relative;
  float: right;
  width: 231px;
  height: 92px;
  background: url(../images/plane-right-wing.png) no-repeat;
}


#plane-propeller-left  {
  margin: 300px auto auto -130px;
  position: relative;
  float: left;
  width: 92px;
  height: 149px;
  background: url(../images/plane-propeller-left.png) no-repeat;
}

#plane-propeller-right {
  margin: 300px -130px auto auto;
  position: relative;
  float: right;
  width: 92px;
  height: 149px;
  background: url(../images/plane-propeller-right.png) no-repeat;
}

#plane-body {
  margin: 300px auto 0 auto;
  position: relative;
  z-index: 500;
  width: 54px;
  height: 333px;
  background: url(../images/plane-body.png) no-repeat;
}

#plane-tail {
  margin: 100px auto 0 auto;
  position: relative;
  width: 184px;
  height: 52px;
  background: url(../images/plane-tail.png) no-repeat;
}

This is a fiddle of the same - http://jsfiddle.net/joystan/x2f0atdj/

Yes, I have...the above code is working fine. I want to change the tweened parts of the airplane to a single image of the entire plane and then pin the single image. — Joystan Fernandes, Oct 23 '15 at 09:12
Read my answer, you don't need pin option for that effect, it's just the approach you're using :D — Zlatko Vujicic, Oct 23 '15 at 16:39

Zlatko Vujicic · Accepted Answer · 2015-10-26T08:47:24.757

try out this approach:

Put image of plane in document and give it opacity: 0
Once you have it on stage, give it same position, width, height, so on, so on, to fit where you want it
make plane image opacity: 1, and than make parts opacity: 0

That's it, if you want plane image to be pinned, just put position: fixed on it, you don't need to make it pin

P.S. Don't forget to keep animating margins not left, top, bottom, right position

Cheers

ScrollMagic pin is not working in TimelineMax

1 Answers1