Move images based on scroll-CodePudding

I'm trying to create a section where I have two Images

<img >
<img >

the first image is left aligned and the second one is right I want to move them from right to left and left to right based on scroll When the user scrolls down images should move to the center from left and right

Here is the code pen link: https://codepen.io/taruunn/pen/RwjQrOy

CodePudding user response：

You can add key at .add(). This code, I add "first".

So it will move together.

Apply the code below.

var controller = new ScrollMagic.Controller();

var scrollHorizontal = new TimelineLite()
  .add(TweenMax.to("#scrollHorizontal1", 1, {x:'-100%'}), "first")
  .add(TweenMax.to("#scrollHorizontal2", 1, {x:'100%'}), "first");

var horizontalScroll = new ScrollMagic.Scene({
  triggerElement: "#scrollHorizontal",
  triggerHook: 'onLeave',
  duration: 3000
}).setTween(scrollHorizontal).setPin("#scrollHorizontal").addTo(controller);