Estoy tratando de crear una sección donde tengo dos imágenes.
<img class="first"> <img class="second">la primera imagen está alineada a la izquierda y la segunda está a la derecha. Quiero moverlas de derecha a izquierda y de izquierda a derecha según el desplazamiento. Cuando el usuario se desplaza hacia abajo, las imágenes deben moverse hacia el centro de izquierda a derecha.
Aquí está el enlace del lápiz de código: https://codepen.io/taruunn/pen/RwjQrOy
Puede agregar una clave en .add() . Este código, agrego "first" .
Entonces se moverá juntos.
Aplica el código a continuación.
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);