Jump to content
Search Community

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

Michael Heuberger test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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">
          <div id="innovation">
            <p>To provide</p>
            <h1><span>leading edge innovation</span></h1>
          <div id="world">
            <p>To the country at the</p>
            <h1><span>leading edge of the world</span></h1>


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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...