The camera moves around the scene when scrolling THREE.JS GSAP SCROLLTRIGGER

Question

My problem is when I scroll camera works good but closer to the end its stopping moving smoothly.

At this video I will show how its should work.

And as I said, I have some little problems..

My glitch code: https://glitch.com/edit/#!/field-polished-border

  gsap.to(camera.position, {
   x: 1,
   ease: "none",
   scrollTrigger:{
    trigger: sections[8],
   },
 })

score 0 · Accepted Answer · answered Aug 25 '22 at 17:20

Your if statements are pretty disorganized, so they eventually start conflicting with each other.

if(scrollTop >= 1400){
  // rotate to y: -11
}
else{
  // rotate to y: -9.5
}

if(scrollTop >= 3700){
  // rotate to y: -12.5
}

This means that when scrollTop reaches 3701, it is both greater than 1400 and 3700, so it'll try to execute both rotations, fighting with each other and giving you glitchy behavior. You should clean up your if statements and make them more organized so they don't contradict each other:

if (scrollTop < 1400){
  // rotate to y: -9.5 when less than 1400
}
else if (scrollTop < 3700) {
  // rotate to y: -11 when between 1400 and 3700
}
else {
  // rotate to y: -12.5 when greater than 3700
}

The camera moves around the scene when scrolling THREE.JS GSAP SCROLLTRIGGER

1 Answers1