I can't make a normal horizontal scroll ScrollTrigger

[Islam Ibrakhimzhanov]

Работаю вторую неделю, помогите ребята. Мне нужно сделать горизонтальную прокрутку для всего раздела. Пример с этого сайта , там тоже используется Gsap, но я не вижу его кода

 

 

 

Это должно быть так https://karinasirqueira.com/projects/mailchimp/

 

See the Pen mdKraWW by ibrakhimzhanov (@ibrakhimzhanov) on CodePen

[Cassie]

Hi there.

Could you please explain a bit more? 

Thank you

 

Всем привет. Не могли бы вы объяснить немного больше? Спасибо

[Islam Ibrakhimzhanov]

13 hours ago, Cassie said:

Hi there.

Could you please explain a bit more? 

Thank you

 

Всем привет. Не могли бы вы объяснить немного больше? Спасибо

Hi, I need to execute exactly the same logic as on this site -> https://karinasirqueira.com/projects/mailchimp

[Islam Ibrakhimzhanov]

People, I looked for solutions, and slightly altered the code, now it looks like this: 

See the Pen bGKBYEN by ibrakhimzhanov (@ibrakhimzhanov) on CodePen

 

There is one problem left😑, when scrolling, it is necessary to salt to the second element of the el class, that is, the scroll should stop as soon as the word Chevrolet ends. I created two methods with gsap.to() but for some reason it works clumsily. I will be glad if you guide me on the right path.

[Trapti]

I don't think you need two horizontal scroll as per the example site you have shown https://karinasirqueira.com/projects/mailchimp

To me looks like you want to achieve like below pen. Just add your content ans style.  Remove all the navigation.

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

 

Sorry if I understood your problem incorrect. 

[Islam Ibrakhimzhanov]

5 hours ago, Trapti said:

I don't think you need two horizontal scroll as per the example site you have shown https://karinasirqueira.com/projects/mailchimp

To me looks like you want to achieve like below pen. Just add your content ans style.  Remove all the navigation.

 

 

 

Sorry if I understood your problem incorrect. 

Yes, we misunderstood each other, but I think it's my fault, I couldn't formulate the question clearly. I need an exact copy of the work from the site https://karinasirqueira.com/projects/mailchimp / because I have the inscription Chevrolet because the card and the card are both on her website.

[Rodrigo]

Hi,

 

I've been reading this a few times and I'm having a few issues trying to completely get what you're doing in your code. From the example you posted I believe that you want horizontal sections and snapping to the start of each section, right?

 

For the sake of simplicity I removed all the content from your HTML and left just this:

<section class="customContainer flex flex-nowrap bg-[#FFCE1F]">
  <div class="el  bg-red-500 flex items-center h-screen font-oswaldM text-main text-[677.95px] uppercase">
    chevrolet
  </div>

  <div class="el flex flex-nowrap item-wrap w-[300%]">
    <div class="item flex items-center bg-red-300 h-screen w-screen">
    </div>

    <div class="item flex items-center h-screen w-screen bg-amber-500">
    </div>

    <div class="item flex items-center h-screen w-screen bg-blue-900">
    </div>
  </div>
</section>

With the javascript code you have I can see a problem that could be the cause of your issues. You are creating two different sets of ScrollTrigger instances for two different collections of DOM nodes.

let items = gsap.utils.toArray(".item");
let el = gsap.utils.toArray(".el");

gsap.to(el, {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".customContainer",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".customContainer").offsetWidth,
  },
});

gsap.to(items, {
  xPercent: -100 * (items.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".item-wrap",
    pin: true,
    scrub: 1,
    snap: 1 / (items.length - 1),
    end: () => "+=" + document.querySelector(".item-wrap").offsetWidth,
  },
});

First you create a GSAP instance for the el array that is triggered when the top ".customContainer" element hits the top of the viewport (default start point). Is worth noticing that the top of the trigger element is at zero px so as soon as you start scrolling that instance starts. Then you create another GSAP instance for the items array that is triggered when the top of the  ".item-wrap" element hits the top of the viewport. The top of this element is also zero px, since vertically both elements are at the same point, so this starts at the same time as your other GSAP instance's ScrollTrigger. See the issue now? You have two different ScrollTrigger instances running and being updated at the same time with different snapping points and being affected by the same scroll position.

 

My recommendation is to add everything in a single GSAP Timeline instance so you have a single sequence of animations and remove ScrollTrigger of the equation completely, just get your animations working without ScrollTrigger and when they are working as you expect, then you add ScrollTrigger to the mix.

 

@Cassie made a great video with a simple example of this particular recommendation:

Give that a try and let us know if you have more questions.

 

Happy Tweening!

[Islam Ibrakhimzhanov]

19 hours ago, Rodrigo said:

Hi,

 

I've been reading this a few times and I'm having a few issues trying to completely get what you're doing in your code. From the example you posted I believe that you want horizontal sections and snapping to the start of each section, right?

 

For the sake of simplicity I removed all the content from your HTML and left just this:

<section class="customContainer flex flex-nowrap bg-[#FFCE1F]">
  <div class="el  bg-red-500 flex items-center h-screen font-oswaldM text-main text-[677.95px] uppercase">
    chevrolet
  </div>

  <div class="el flex flex-nowrap item-wrap w-[300%]">
    <div class="item flex items-center bg-red-300 h-screen w-screen">
    </div>

    <div class="item flex items-center h-screen w-screen bg-amber-500">
    </div>

    <div class="item flex items-center h-screen w-screen bg-blue-900">
    </div>
  </div>
</section>

With the javascript code you have I can see a problem that could be the cause of your issues. You are creating two different sets of ScrollTrigger instances for two different collections of DOM nodes.

let items = gsap.utils.toArray(".item");
let el = gsap.utils.toArray(".el");

gsap.to(el, {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".customContainer",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".customContainer").offsetWidth,
  },
});

gsap.to(items, {
  xPercent: -100 * (items.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".item-wrap",
    pin: true,
    scrub: 1,
    snap: 1 / (items.length - 1),
    end: () => "+=" + document.querySelector(".item-wrap").offsetWidth,
  },
});

First you create a GSAP instance for the el array that is triggered when the top ".customContainer" element hits the top of the viewport (default start point). Is worth noticing that the top of the trigger element is at zero px so as soon as you start scrolling that instance starts. Then you create another GSAP instance for the items array that is triggered when the top of the  ".item-wrap" element hits the top of the viewport. The top of this element is also zero px, since vertically both elements are at the same point, so this starts at the same time as your other GSAP instance's ScrollTrigger. See the issue now? You have two different ScrollTrigger instances running and being updated at the same time with different snapping points and being affected by the same scroll position.

 

My recommendation is to add everything in a single GSAP Timeline instance so you have a single sequence of animations and remove ScrollTrigger of the equation completely, just get your animations working without ScrollTrigger and when they are working as you expect, then you add ScrollTrigger to the mix.

 

@Cassie made a great video with a simple example of this particular recommendation:

Give that a try and let us know if you have more questions.

 

Happy Tweening!

Hi, Rodrigo Thank you for taking the time to describe the problem, but since I'm new and have only been here for a few weeks, I didn't understand anything except that you wrote that you need to do everything in one instance of Gsap. I've watched the video you sent me from Cassie more than once, but unfortunately I didn't understand it either. Due to the fact that you didn't understand, I just need Chevrolet to stop at the beginning of the next section after the word, or Chevrolet to scroll through without binding, and everyone else has already scrolled through one section. Because of this logic, I actually created two Gsap instances in the hope that I would be doing two different things. To make it even clearer, I overwritten my code:

See the Pen ZERLJZw by ibrakhimzhanov (@ibrakhimzhanov) on CodePen

, but as you can see, there is an empty space after the word Chevrolet, I don't understand why:( I did from this example:

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

[Cassie]

See the Pen gOKgXJb by GreenSock (@GreenSock) on CodePen

 

Hi!

The problem is that your sections have different widths, and the solution you used depended on them being the same width.

This solution will work better for you, it translates the container rather than the individual elements

 

----

 

Привет!

Проблема в том, что ваши секции имеют разную ширину, а решение, которое вы использовали, зависело от того, что они были одинаковой ширины.

Это решение будет работать лучше для вас, оно переводит контейнер, а не отдельные элементы

 

 

[Islam Ibrakhimzhanov]

16 hours ago, Cassie said:

 

 

 

Hi!

The problem is that your sections have different widths, and the solution you used depended on them being the same width.

This solution will work better for you, it translates the container rather than the individual elements

 

----

 

Привет!

Проблема в том, что ваши секции имеют разную ширину, а решение, которое вы использовали, зависело от того, что они были одинаковой ширины.

Это решение будет работать лучше для вас, оно переводит контейнер, а не отдельные элементы

 

 

Thanks a lot, this is what I need. To all the good who helped thanks, Cassie and thank you very much.