ALTIMAX Posted November 15, 2023 Share Posted November 15, 2023 Hi all, I'm trying to make a horizontal scroll with blocks of fluctuating sizes. The content of my blocks can protrude when responsive, which is why I scroll horizontally then vertically, but since the blocks aren't one screen width wide I'm forced to cheat. Depending on the height of each of my blocks, I increase the width of my container, then when I scroll over my blocks with the overhanging content, I trigger an upward animation and a margin on the left to simulate a vertical scroll. My main problem is that my animations on blocks with protruding content are triggered at the start of my horizontal scroll and not when I arrive at my block. When I activate my markers, they are not at the bottom of the screen as in these examples : See the Pen gOjZKOO by designcourse (@designcourse) on CodePen My code : const container = document.querySelector(".__container"); const sections = gsap.utils.toArray(".__section"); const screenHeight = window.innerHeight; let spaceTotal = 0; sections.forEach(section => { let drag = section.querySelectorAll(".__drag"); if(section.offsetHeight < screenHeight || drag.length === 0) return let space = section.offsetHeight - screenHeight; spaceTotal = spaceTotal + space; gsap.to(drag,{ y: "-"+space, marginLeft:space, scrollTrigger: { trigger: section, containerAnimation: scrollTween, start: 'left center', scrub: 1, markers: true, } }); }); function getScrollAmount() { let containerWidth = container.scrollWidth + spaceTotal; return -(containerWidth - window.innerWidth); } const scrollTween = gsap.to(sections, { x: getScrollAmount, duration: 3, ease: "none", }); ScrollTrigger.create({ trigger:".__container", end: () => `+=${getScrollAmount() * -1}`, pin:true, animation:scrollTween, scrub:1, invalidateOnRefresh:true, }) J'espère avoir été le plus clair possible. See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted November 15, 2023 Share Posted November 15, 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...
Rodrigo Posted November 15, 2023 Share Posted November 15, 2023 Hi @ALTIMAX, The links for the demo you added to your post belong to another user actually and doesn't reflect the code snippet you posted as well. Please add a minimal demo of the code you have, because the ones you posted are both working as expected. Happy Tweening! Link to comment Share on other sites More sharing options...
ALTIMAX Posted November 16, 2023 Author Share Posted November 16, 2023 I finally solved my problem on my own. Thanks anyway. Have a nice day! 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted November 17, 2023 Share Posted November 17, 2023 Hi, Great to hear that you were able to solve your issue! 🥳 Happy Tweening! 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