scrollTrigger Horizontal container animation panels disappearing on resize

[JJEccles]

Hi all, I am having an issue where the scrollTrigger horizontal container animation works fine on all screen sizes, but if a resize occurs the panels will disappear from the window. Which on my page doesn't look so great as the viewer gets to see all the elements and backgrounds behind it.

Ive seen this issue mentioned once or twice in other forums, but I have not seen anyone openly show a solution. I been banging away at it for the past few days with  lots of different resize event linked function attempts without any luck.

 

The demo is very minimal & in my site I am using a custom  scroller on the main element of my page which I am not in this demo. Although in the demo I have managed to recreate the issue pretty much spot on to what I'm getting in my page.

 

When resizing occurs before or after the container and has started its animation, no problems. but if you resize the window once the animation starts., panels disappear from view. 

 

If anyone with a better mind than mine (which I'm sure there are lots out there) could please take a look and advise on a solution I'd be really grateful. I very much like the horizontal container animation and think it has loads of potential for lots of developers out there.

 

Its just this resizing issue that's stopping it from being a complete gamechanger.

 

Thanks again and best regards

 

James

See the Pen VwRRpyG by James-Eccles (@James-Eccles) on CodePen

[JJEccles]

 

 

 

[mvaneijgen]

Hi @JJEccles welcome to the forum!

 

Just to make sure this is you issue right? When you resize the screen bigger, you'll see the next element coming in? You could build your own resize handler and call ScrollTrigger.refresh() on every tick, this will be horrible for performance and the site will probably lag while resizing.  ScrollTrigger watches for a resize event and then debounces so that it only has to recalculate everything once (when the visitor stops resizing). 

 

I have to say that 'normal' visitors never resize the browser in the middle of scrolling a page, that is only something developer (and annoying designers) do while testing a website. Personally I wouldn't focus on fixing this weird behaviour and instead spend that time on making the site more accessible for vistors who can really benefit for these enhancements.

 

Hope it helps and happy tweening! 

 

[JJEccles]

Hi thank you for your prompt reply.

 

No that's not my issue, to have the scroll position move slightly on resize would not be an issue for me at all, my issue is that when resizing occurs the container and panels completely disappear from the window.

 

I apologize for the quality of the video but there was no other way i could get it below 1mb. after doing more digging around i found the resizing issue goes away if my scrollTrigger pinType is set to transform.

 

However I need it to remain fixed as the container panels get this horrible jarring rubber band effect on scroll  as they move horizontally across the screen when the pin is set to "transform".

 

Is there a way i can keep my pinType as fixed but have it switch to transform during the resize event or any other workaround for this issue?

 

I'm still plugging away trying to find a way to make it work but without any luck . But I think I need to find a way for the scrollTrigger to behave like it does when the pinType is in "transform" during resizing  while being in "fixed" mode.

 

Here is my container animation settings, (btw my main is the scroll-able element on my page):

setupAnimations() {

    let sections = gsap.utils.toArray(".panel");

    sections.forEach((section) => {

      section.style.height = `${window.innerHeight * 1.2}px`;

    });

 

    this.scrollTween = gsap.to(sections, {

      xPercent: -100 * (sections.length - 1),

      ease: "none",

      scrollTrigger: {

        id: "hScroll",

        scroller: "main",

        trigger: ".container",

        pin: true,

        pinReparent: true,

        scrub: 1.5,

        anticipatePin: 1,

        end: "+=3000",

      },

    });

 

And below is my setupScrollTrigger method:

 

  setupScrollTrigger() {

    let container = document.querySelector("main");

 

    // Check if the container exists

    if (container) {

      ScrollTrigger.scrollerProxy(container, {

        scrollTop(value) {

          if (arguments.length) {

            container.scrollTop = value; // setter

          } else {

            return container.scrollTop; // getter

          }

        },

        getBoundingClientRect() {

          return {

            top: 0,

            left: 0,

            width: window.innerWidth,

            height: window.innerHeight,

          };

        },

        pinType: "fixed",

      });

    }

  }

[mvaneijgen]

I did not see that yesterday in your pen, maybe I hadn't looked hard enough. If you remove pinReparent: true, from your ScrollTrigger this doesn't happen, I have to say I've never used that feature before, so I can think of any fixes, but as the docs state 

 

Quote

 ... Only use this feature if you must.

— https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

I also don't see these images I see in your screen recording. And the snippet you've shared is also not in your demo. Are you maybe working in a frame work? 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

And still no 'normal' visitor is resizing their browser, so if you have time over to spend on the project try fixing screen reader accessibility for your site.