How to animate two equal halves moving in the opposite direction?

[Michael Heuberger]

Hello guys
 
I have an interesting challenge here and need this effect to be done in the next 48 hours!

 

Here is the HTML:
 
      <section id="edge">
        <article>
          <div id="innovation">
            <p>To provide</p>
            <h1><span>leading edge innovation</span></h1>
          </div>
 
          <div id="world">
            <p>To the country at the</p>
            <h1><span>leading edge of the world</span></h1>
          </div>
        </article>
      </section>

 

The section is one page among many other scrollable pages. It has two equal divs, each one is 50% wide on each side. div#innovation should move in from top to bottom, div#world should move in the opposite direction, from bottom to top. Both will disappear outside.

 

They should move at the same speed while the user is scrolling down to the next page.

 

How can we achieve this with ScrollMagic?

[GreenSock]

Sorry, we don't support ScrollMagic here - we try to stay focused on GSAP. We're just not familiar with ScrollMagic enough to offer solid answers. I'd suggest asking the author of ScrollMagic.