Play imported Camera Animation on Scroll in Sticky Canvas

[robalola]

Hello :)

I'm trying to get an imported model with animated Camera Movement to play on scroll inside a sticky canvas. I tried a simple setup with Drei useAnimation and useScroll Hook and it worked perfectly. Here is the CodeSandbox of what I'm trying to achieve with simple placeholder models and animations. Since I will need quite a few Animations and Canvases I want to use scroll-rig but I just can't get the animation to play on scroll.

My idea was to use the scrollstate.progress instead of the Drei scroll.offset.
I tried implementing my idea with the StickyScrollScene but without any luck.

Is what I'm trying to achieve possible with the scroll-rig?

Thanks and have a nice day!

[ffdead]

Hi @robalola - cool sandbox!

This is probably not the best use case for the scroll-rig as it has a fixed camera to be able to sync threejs units to pixel values.

You could have ViewportScrollScenes for each scene and animate the camera inside, since those are separate render passes.

But if you have less than say 8 canvases it's probably easier to stick with the Drei setup you already have prototyped :)