Search code examples
three.jsgsapscrolltrigger

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

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.

I was inspired by this web-site :)

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

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

This how this think is work right now:

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

  • 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
}