How can I set up the correct scrolling of vertical sections with navigation using ScrollTrigger ?

[litash]

I need to block scrolling down when I scroll through the  vertical section ".side-scrolling-wrapper" like pinSpacing parameter was true.

I want ".side-scrolling-wrapper" only height: 1000px, but when I make height: 1000px everything breaks. 

I need to do the correct navigation logic, now click on navigation incorrectly scroll to section

 

and last qustion, how I can setup transform: translate with steps for each section, for my background in .side-scrolling-wrapper

for example:

Panel 1 -  for background should be installed transform: translate(0, 0)

Panel 2 - for background should be installed transform: translate(-25%, 0)

Panel 3 - for background should be installed transform: translate(-50%, 0)

Panel 4 - for background should be installed transform: translate(-75%, 0)

 

 

update: I set pinSpacing: true and this solved my problem with height: 1000px 

See the Pen oNzVMar by litash (@litash) on CodePen

Edited January 20, 2021 by litash
fix one problem

[ZachSaucier]

2 hours ago, litash said:

I need to do the correct navigation logic

To do this, you will need to calculate where the scrollbar should go given an anchor click. I show how to do that sort of thing in these posts:

You'll need to apply the technique to your situation though  

 

2 hours ago, litash said:

how I can setup transform: translate with steps for each section, for my background in .side-scrolling-wrapper

I'd probably make your gsap.to(sections tween a part of a timeline, apply the ScrollTrigger to said timeline, and add to that timeline additional tweens for your additional translations.

[litash]

On 1/20/2021 at 4:23 PM, ZachSaucier said:

I'd probably make your gsap.to(sections tween a part of a timeline, apply the ScrollTrigger to said timeline, and add to that timeline additional tweens for your additional translations.

Sorry, I added animation but my animation plays automatically, how can I play animation only when I scroll, with reverse of course.

See the Pen GRjLpYJ by litash (@litash) on CodePen

[ZachSaucier]

I don't understand what you're trying to do with that first timeline. Would you mind explaining?

 

I highly recommend that you try to understand the demos in the threads that I linked to before trying to create this sort of thing yourself  

[litash]

2 hours ago, ZachSaucier said:

I don't understand what you're trying to do with that first timeline. Would you mind explaining?

 

I highly recommend that you try to understand the demos in the threads that I linked to before trying to create this sort of thing yourself  

 

 

I was able to implement my plan) thanks!

 

I added this code and this work good for me  I'm glad!

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: '#panels-container',
    start: "+=100%",
    scrub: 1,
    end: "+=400%",
    markers: true,
  }
})
  .to(".background", 1, {x: "-25%"}, '-=0.1')
  .to(".background", 1, {x: "-50%"}, '+=0.6')
  .to(".background", 1,   {x: "-75%"});