I'm trying to create a section where I have two Images
<img class="first">
<img class="second">
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
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);