Horizontal Scroll Issue with section in between others sections

[Danclp]

Hi,

I have some questions regarding the horizontal scroll with ScrollTrigger.

The horizontal scroll happened between a few other sections and some other animations.

As the ScrollTrigger animation is shared with other sections, how do I control the scroll speed?

scroll
  .to(".section-2", {
    autoAlpha: 1
  })
  .fromTo(".section-2 .text", {
    yPercent: -50,
    opacity: 0
  }, {
    yPercent: 0,
    opacity: 1
  })
  .to(".longImg", {
    xPercent: -100 * (".longImg".length - 1),
    duration: 2
  })

function enableScroll() {
  ScrollTrigger.create({
    trigger: ".container",
    start: "top top",
    pin: true,
    animation: scroll,
    scrub: 2
  })
}

 

 .to(".longImg", {
    xPercent: -100 * (".longImg".length - 1),
    duration: 2
  })

And through the research, I found the above solution.

However, why can't I control the scroll limit?

My image scrolled completely to the left and disappeared.

But I need it to end right at the end of the image and stop.

 

Sorry, I am still new to GSAP.

I submitted a request earlier, but due to the complexity of the codes, it has been rejected for the minimalist codes demo.

I hope this submission meet the requirement.

Till then, I look forward to your kind assistance and guidance.

 

Thank you.

 

 

See the Pen yLQVvEK by danclp (@danclp) on CodePen

[Cassie]

Hi there!

 

xPercent means 100% of that elements width. In your case you need the image to move by 100% of it's own width, minus the width of the screen. 

Here's the magic incantation

 .to(".longImg", {
    xPercent: -100,
    x: () => window.innerWidth,
    duration: 2
  })

 

It's important when using functional values that measure screen size that you invalidate those values if the user resizes their browser and changes the size of the screen.

 

let scroll = gsap.timeline({
  paused: true,
  invalidateOnRefresh: true
})

See the Pen zYMogZo?editors=0010 by GreenSock (@GreenSock) on CodePen

Hope this helps! 💚

[Danclp]

Hi Cassie,

How are you doing?

It has been a while since I attended your online tutorial.

I hope everything works well on your end.

Yes, this is useful.

Thank you.

[Cassie]

Ah! You came along to my workshop. 🙏🏻💚

Always so lovely to bump into workshop friends in here. I'm doing well thanks, glad to see you're flexing your GSAP knowledge out in the real world!

[Danclp]

Hi Cassie,

 

So sorry to disturb you again.

When I thought things were solved, another problem spent my whole day with local and codepen debugging.

After adding in a few more animation commands, the horizontal scrolling image no longer finishes its scrolling.

I activated the "markers" which shows that the "end" mark stops before all the section commands are finished.

Animation on "section-4 and section-5" is not working.

I tried to add in "end: '+=12000'".

It doesn't seem to help, either.

I am not sure where caused the problem.

Can you give me some hints and guidance again?

Below is the code pen link after Fork.

 

See the Pen oNQBzXw by danclp (@danclp) on CodePen

[Rodrigo]

Hi,

 

What should actually happen? Right now you have this on your CSS:

.section-4, .section-5 {
  display: none;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

So that basically means that those sections are taken out of the document flow, hence when ScrollTrigger makes it's calculations those are not accounted for soto speak. On top of that you have this:

<div class="container">
  <div class="wrapper">
    <section class="first">
      <!-- CONTENT -->
    </section>
    <section class="section-4">
      <!-- CONTENT -->
    </section>
    <section class="section-5">
      <!-- CONTENT -->
    </section>
  </div>
</div>

With these styles:

.first {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

And this is your ScrollTrigger config:

ScrollTrigger.create({
  trigger: ".container",
  start: "top top",
  end: "+=1200",
  pin: true,
  animation: scroll,
  scrub: 2,
  markers: true
})

So basically you have three sections one after the other vertically and you are pinning the container of all those elements, so those animations are happening, they're just below the fold, so you can't see them. If possible make all those elements direct children of the <body> tag and create a ScrollTrigger instance for each and pin each one. Other option is to give the wrapper a 100vh height and an overflow: hidden in order to move the sections up and down with the same timeline using yPercent.

 

Hopefully this helps.

Happy Tweening!

[Danclp]

Hi Rodrigo,

 

You hit my head hard enough to wake me up.

I never thought of doing it that way, "give wrapper a 100vh and an overflow: hidden, then move the object up with yPercent"... 👍

I am a designer-born web developer, know not much about programming.

To clarify, when you say create ScrollTrigger instance for each and pin each one, are you referring to the format below?

gsap.to("selector-1",{
	xPercent: 0,
  	duration: 0,
  	scrollTrigger: {}
})
gsap.to("selector-2",{
	xPercent: 0,
  	duration: 0,
  	scrollTrigger: {}
})

 

[Cassie]

Yep! Most scrollTriggered pages aren't one massive timeline. It's more common to see a page laid out normally with sections one after another, and then have a trigger/pin for each section. It does depend on what you're after, but I personally try to ensure that the page flows normally if I remove the GSAP code, then in the JS I can adjust the layout and do animation. More of a progressive enhancement approach.

 

There are a lot of examples here to look through to see different approaches. Maybe you can find one that's helpful?

https://greensock.com/st-demos/

 

Here's an example using different triggers for each section.

See the Pen PoxWLmp?editors=0010 by GreenSock (@GreenSock) on CodePen

It seems like you may want a mixture of timelines and tweens with different triggers for what you're trying to achieve? 

[Danclp]

Hi Rodrigo and Cassie,

Noted with the response, and thanks a million for the kind help.

I will give that a try.