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

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%"});

 

 

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

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

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

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

[How can I properly update the scene using TimelineMax when clicking on the buttons ?]

How can I properly update the scene using TimelineMax when clicking on the buttons (links), and then continue using the mouse wheel without breaking anything ?

 

I need to scroll through sections when I click and scroll with the mouse wheel I can't do it, everything breaks down for me when I click on the buttons :(

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