[threejs camera position animation through a guided loop with scrollTrigger? Please refer the attached website]

Hi guys,

 

I'm seeking your help and thoughts on the below attached website, I'm trying to achieve a guided scrollTrigger animation on the camera position in threejs scene, it need to be working like a loop. To go through particular objects in the threejs scene and at last it should come to the first position, like a circular guided motion path. Based on the camera.position values Im able to go through each position based on the button click. But I want to achieve the same through scroll event. When a user starts wheeling the scrollbar the camera should move in a guided path and it should reach the initial position when all other animations in the series are completed.

 

Please refer this website for your reference.

https://www.magische-spiegelungen.de/

 

Any ideas guys??

 

Thanks,

Shaheer

[How to hide scrollbar in window when scrolltrigger is used in GSAP?]

Hi @akapowl,

 

Hiding the scrollbar in viewport is fixed with the below code in css. Thank you!!

::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

[How to hide scrollbar in window when scrolltrigger is used in GSAP?]

Hi @akapowl, Thank you for the quick reply. Let me go through it. Also did you check the webpage I mentioned in the article? It's having that smooth looping animation. Based on the scroll the camera moves in a guided path. do you have any idea how it can be achieved?

 

Thanks,

Shaheer

[How to hide scrollbar in window when scrolltrigger is used in GSAP?]

Hi guys, I'm seeking your help and thoughts on the below website, I'm trying to achieve the similar guided scrollTrigger animation on the camera, that it works like a loop to go through all the pictures in the animation and after reaching the final position it comes back to the first picture position. Which it makes the animation guided and looped throughout the experience. How can we achieve it with scrollTrigger without making the scrollbar visible in the viewport.  

 

Example website - https://www.magische-spiegelungen.de/

 

Thanks,

Shaheer