horinzontal scrolling site (completed) want to add effect half text coming from above and below with scrub.

[MikeFries78]

 

// H Scrolling
    const tl = gsap.timeline({
      ease: "none",
      scrollTrigger: {
        trigger: container,
        start: 'center center',
        pin: true,
        scrub: true,
        invalidateOnRefresh: true,
        end: () => scrollWidth,
        onUpdate: (self) => {
          gsap.set(container, { x: -self.progress * scrollWidth });
        },
      },
    })

My next.js app is using horizontal scroll using the code above, and for one of the sections I'd like:

- there will be two blocks of text stacked horizontally
- as the container scrolls into that section I'd like the two blocks to enter view, one coming from above and one coming from below and both ending their their stacked positions
- should be scrub:1 also so that if the user scrolls back past the centre point of the view that the two sections move back of the view in opposite directions.

 

If anyone can point me in the direction of relevant threads for this effect, especially ones that handle this effect for a horizontal scrolling app, that would be appreciated.

[GreenSock]

First of all, it looks very odd to me that you're using an onUpdate on a timeline to run a gsap.set(). Why not just do this?: 

gsap.to(container, {
  ease: "none",
  x: () => -scrollWidth,
  scrollTrigger: {
    trigger: container,
    start: 'center center',
    pin: true,
    scrub: true,
    invalidateOnRefresh: true,
    end: () => "+=" + scrollWidth,
  }
})

That would certainly be cleaner and better for performance.

 

You mentioned that you want to create this new effect "for one of the sections", but I'm not sure what that means. It's very difficult to offer advice if you don't provide a minimal demo, like a CodePen or Stackblitz. Is this section inside the container that you're moving horizontally? If so, you'll need to leverage the containerAnimation feature. I'd encourage you to give it a shot and then if you get stuck, just post back here with a minimal demo and we'll do our best to answer any GSAP-specific questions. It should be a matter of just doing a timeline that has two simultaneous tweens, one animating moving up and the other down, perhaps yPercent: 100 and yPercent: -100. 

 

Good luck!

[MikeFries78]

Hey Jack, thank you I'll do exactly that. 

Also pardon by use of (clearly 😅) incorrect terms.  By sections I just meant the horizontally stacked individual full width screen sized areas that I have which the container is viewing (my understanding is it doesn't actually move along them but I'm quite new to GSAP and learning).

Thank you for taking the time to provide some guidance.

[GreenSock]

No problem at all, @MikeFries78! Nice to have you on board. I hope you didn't take my comments as some kind of criticism. We aim to be very warm and welcoming in this community - we never want to be like many of those other online communities where questioners get insulted or condescended to. Yuck. 

 

Once you give it a shot, if you get stuck please don't feel bad about posting back here with your minimal demo. We've got your back when it comes to GSAP-related stuff. ✅