scrolltrigger Issues with ScrollTrigger and xPercent on horizontal scroll

[Archimede Soc.Coop.]

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

[GSAP Helper]

Hi there!

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. It's not very clear to me what you're asking, and all the visuals are HUGE, so it makes seeing things in your demo challenging. I don't quite know what your goal is or what precisely the problem is that you're trying to describe. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo that makes the issue very clear with as little code as possible. Please don't include your whole project. Just some colored <div> elements is great.

 

[Archimede Soc.Coop.]

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

[mvaneijgen]

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! 

 

See the Pen mdGxBde?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[Archimede Soc.Coop.]

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.
 

[Rodrigo]

Hi,

 

Is not that a live example is not accepted. If the live example is a good reference for what you're trying to do, then no problem. When users ask us to find an issue on a live site we tell them that we can't because we can't access or edit the code and play with it in order to test and see what could be the issue.

 

If the live example gives u a good idea of what you're trying to achieve, then by all means include it so we can take a look and compare it with your set up, in the hopes that it'll speed the process.

 

Happy Tweening!