I want to apply scrolling effect like in Wix https://pt.wix.com/studio/enterprise image scrolling
please view and open this url and chec https://pt.wix.com/studio/enterprise see
this is my website
https://medisuggest.com/
here is my code
gsap.fromTo(".surgery-video-p",
{ scale: 1 },
{
scale: 1.45,
ease: "none",
scrollTrigger: {
trigger: ".surgery-video-p",
start: "top 20%",
end: "bottom center",
scrub: true,
pin: true
}
}
);
gsap.fromTo(".image-box-top",
{
x: 4912.8,
y: -405.6,
rotate: 0,
},
{
x: 0,
y: 0,
rotate: 0, // Keep rotation at 0
ease: "power2.out",
scrollTrigger: {
trigger: ".image-box-top",
start: "top 20%",
end: "bottom center",
scrub: true,
pin: true,
pinSpacing: false,
onUpdate: (self) => {
if (self.progress === 1) {
gsap.set('.image-box-top', { clearProps: "transform" }); // Reset transform
}
},
}
}
);