Hi all! I solved my problem using ScrollTrigger, timeline and MotionPathPlugin. With the help of JavaScript, I calculated the coordinates of the points where the image should have moved so that the animation was adaptive to the width of the browser window. Here is an example code, maybe someone will need it.
let path = [
//1
{x: shiftToRight, y: startPoint},
//2
{x: shiftToLeft, y: 680},
//3
{x: shiftToCenter, y: marqueePoint},
//4
{x: shiftToCenter, y: endPoint},
];
const scaledPath = path.map(({ x, y }) => {
return {
x: x,
y: y
}
});
const aboutSpotScene = gsap.timeline({
scrollTrigger: {
trigger:".about",
start: "top 20%",
endTrigger: ".our-history",
scrub: 1.5,
},
});
aboutSpotScene.to(".big-spot", {
motionPath: {
path: scaledPath,
align: 'self',
alignOrigin: [0.5, 0.5],
// autoRotate: true
},
duration: 2,
immediateRender: true,
// ease: 'power4'
})
