bakhabikh

Hello Akapowl, sorry for the late reply. I did check what you suggested and you hit the nail on the head. I made some tweaks in my css and it worked. Thank you

Thanks for your reply. I am using wordpress + elementor. Before deploying my code there I tried it on CodePen and everything worked fine, but once i tried to recreate the same thing on my project it didn't go well as you can see in the video.

Hi , I hope this message finds you well. I'm currently working on a project that involves a horizontal scroll effect using GSAP (GreenSock Animation Platform). The animation looks visually appealing, but I've encountered a peculiar issue that I'm seeking advice on. The Problem: Towards the end of the animation, I've noticed that the section containing the horizontal scroll jumps or moves unexpectedly. I've carefully set up the trigger and pin elements, and the animation seems to work well until this point. However, the final moments of the animation are not as smooth as I'd like them to be. Have a look : https://streamable.com/5qptc3 Code Overview: I'm using the following code structure for the animation: // Reusable function for GSAP Animation function setupHorizontalScrollAnimation(containerId, sectionId, imageListId) { const container = document.getElementById(containerId); const section = document.getElementById(sectionId); const imageList = document.getElementById(imageListId); const images = imageList.querySelectorAll('img'); // Calculate the total width of all images const timeline = gsap.timeline({ scrollTrigger: { trigger: container, start: 'center center', end: () => `+=${images.length * 100}%`, // Adjust the end value based on the number of images pin: section, scrub: 0.2, markers: true, pinspacing: false }, }); timeline.to(images, { xPercent: -100 * (images.length - 1), ease: 'none', }); } // Apply the animation to each section setupHorizontalScrollAnimation('containerAround1', 'parcours-therap', 'imageList1'); setupHorizontalScrollAnimation('containerAround2', 'plan-traitement', 'imageList2');