Horizontal scrolling with variable-size content

[ALTIMAX]

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

[GSAP Helper]

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. 

[Rodrigo]

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!

[ALTIMAX]

I finally solved my problem on my own.

 

Thanks anyway.

Have a nice day!

[Rodrigo]

Hi,

 

Great to hear that you were able to solve your issue! 🥳

 

Happy Tweening!