0

I am using ScrollMagic for animations to happen on scroll. I'm not really well versed with this, still in the learning process.

So I have a Airplane of which parts are disassembled and come together on scroll and form a Airplane.

For example - the left wing, right wing, plane body, tail, left propeller, right propeller all this parts are separated and coming from different directions to form the plane.

I have managed to make this work at 1366x768 screen resolution. But if I open it at different screen resolution the parts do not assemble at the right position. http://jsfiddle.net/jv5s6f0j/1/

HTML - (each ID has a background image)

<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:"31.2%" , top:"-18%"  },0)
            .to("#plane-right-wing", 1, {right:"31.2%" , top:"-18%"},0)
            .to("#plane-body", 1, {top:"-30%"},0)
            .to("#plane-tail", 1, {top:"-48%" },0.5)
            .to("#plane-propeller-left", 1, {left:"19%" , top:"-22%" },0)
            .to("#plane-propeller-right", 1, {right:"19%" , top:"-22%"},0) ;


var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 200})
            .setTween(airplane_tween)
            // .setPin("section.airplane-container")
            // .addIndicators({name: "timeline"}) // add indicators (requires plugin)
            .addTo(controller);

I tried using percentages instead of fixed px yet doesn't solve the problem. Please Help!

Joystan Fernandes
  • 203
  • 4
  • 15
  • You can also optimize your code, maybe put all div out and replace them with img. You are animating DOM element anyway, why animate div with bg image instead of animating just image, change display of image to block just to match div acting. – Zlatko Vujicic Oct 21 '15 at 07:40

1 Answers1

2

Well it really depend on approach, as I can't see CSS (maybe put css for this part only) I can't tell much more. Saying this I'll try to explain you my approach with scrollMagic.

  1. Make relative container that will hold your absolute elements(don't forget width and height here)
  2. Don't use left or right, top or bottom straight forward on absolute elements, also DO NOT use '%' that way, it will never fit your needs

Try this (example of left wing):

  1. Give it dimensions (width and height, for this example I'll make it x and y)

  2. Give it left: 50% (this will position a left side of element on center)

  3. To align it on center assign margin-left: -x/2 (this will position it to center)

Now using this approach, use step 3 (negative margin values) to position elements (NOTE: do not use margin-left: -x/2, that will just center it, use the number u need in px values)

And with scroll magic animate just margins

Do the same for top or bottom values

Hope this will help you

Zlatko Vujicic
  • 353
  • 2
  • 12