How to give position values for element to align perfectly at all screen resolutions?

Question

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!

Answer 1

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