bakhabikh Posted December 29, 2023 Share Posted December 29, 2023 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'); Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 29, 2023 Share Posted December 29, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
bakhabikh Posted December 29, 2023 Author Share Posted December 29, 2023 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. Link to comment Share on other sites More sharing options...
akapowl Posted December 29, 2023 Share Posted December 29, 2023 Welcome to the forum! In that video you attached, it very much looks like you have CSS transitions applied on elements that are affected by ScrollTrigger. Themes like Elementor often apply something like transition: all .3s to lots of elements - those will interfere with GSAP, so you'll have to make sure to overwrite them in your custom CSS. On top of that I would also make sure to overwrite the scroll-behaviour to auto because if I recall correctly, Elementor will by default set it to smooth, which can also interfere with your scroll related JS at some point. I hope this will help already. If it doesn't, unfortunatelly we won't be able to help without a minimal demo clearly demonstrating your issue. Good luck. 2 2 Link to comment Share on other sites More sharing options...
bakhabikh Posted January 3 Author Share Posted January 3 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 1 1 Link to comment Share on other sites More sharing options...
Grappa Posted January 22 Share Posted January 22 I understand why you want to see a minimal demo, in some cases this is not possible, because GSAP is used with Wordpress/Elementor for example. I am all the more pleased that you are still trying to find solutions, as in this case. That saved my project, so a big THANK YOU! I think there are many Elementor/GSAP users, it's a nice combination! Link to comment Share on other sites More sharing options...
Level Up Studios Posted March 13 Share Posted March 13 @akapowl Thank you so much for this. I've been wracking my brains for the last couple of days trying to figure out why my scrolling animation was jumping at the end in WordPress Elementor however, I didn't realize the issue was a transition CSS effect being applied to the container by Elementor itself. I added selector { transition: none; } directly to the container with the GSAP ScrollTrigger animation and it resolved my issue. No more jumping!! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now