[ScrollTrigger with ScrollSmoother issue on triggers]

Hi,

in the example i have cards with two trigger each card.

First trigger scale the card and the second trigger pin the card.

 

When I've added ScrollSmoother the start and the end of the scale trigger generates the issue and only the first scrolltrigger correctly works.

 

Any help would be greatly appreciated.

 

Thanks

 

See the Pen ExeEdVO by archimedewebagency (@archimedewebagency) on CodePen

[Issues with ScrollTrigger and xPercent on horizontal scroll]

56 minutes ago, mvaneijgen said:

Without any Javascript your panels are 100% width, so it isn't a GSAP problem it an CSS issue. I've broken up your flex: property to there individual parts (read more here https://developer.mozilla.org/en-US/docs/Web/CSS/flex) and if you set flex-basis: 100px (commented out)  they are stacked like you want them to be. Hope it helps and happy tweening! 

 

 

 

Hello @mvaneijgen, thank you for reply!

Sorry for mistake, this is my fist approach to GSAP world.
I follow your advise and i put in my code the "flex-basis" property.
But i need that width it is 100% because, every "category slide" need content wich photo and text.
The horizontal scroll must be tranlsate the first slide (slide with title "text with dynamic width for categories") -100% and the next 3 category slide must be stacked as you showed me.

I have some sample from another site to show you, but i know this is not accepted in this forum.
 

[Issues with ScrollTrigger and xPercent on horizontal scroll]

Hello!

I edited my codepen for best visual.
I expect there is no distance from the first slide (with auto width) to the second when they translate to negative X, therefore the "Category 1" title must to be near at the end of the first slide.

My coidepen

 

I hope I was clear

[Issues with ScrollTrigger and xPercent on horizontal scroll]

Hello everyone!

I have some problem to use correctly Scrolltrigger.
The problem it show when i try to translate all slide to "xPercent: -100" when scroll.
 

var thirdPanel = document.querySelector(".third-panel");
    if (thirdPanel) {
      var thirdPanelRect = thirdPanel.getBoundingClientRect();
      const sectionsThirdPanel = gsap.utils.toArray(".third-panel .slide");
      if (sectionsThirdPanel.length > 0) {
        const numSections = sectionsThirdPanel.length - 1;
        const snapVal = 1 / numSections;

        gsap.to(sectionsThirdPanel, {
          xPercent: -100 * numSections,
          ease: "none",
          scrollTrigger: {
            trigger: ".third-panel .slide-second",
            pin: ".third-panel",
            scrub: true,
            snap: snapVal,
            start: `top+=${thirdPanelRect.top} top`,
            end: "+=" + document.querySelector(".third-panel").scrollWidth,
            markers: {
              startColor: "red",
              endColor: "red",
              fontSize: "3rem",
              indent: 200,
            },
          },
        });
      }
    }

For clarity please check my codepen.

My intention is to create a "stacking" slide alfter first blue slide.

I hope I was clear, open the codepen for best result.
For other information please ask.

Mattia

See the Pen RwYQzjJ by Dyakho (@Dyakho) on CodePen