Animate a 3d model on scroll

[sridharan]

Hi everyone.
I have a React + R3F + GSAP project which emulates a timeline of animations. For each 3d model on the page, there is a defined canvas of height 600 ~ 700 px.

The items on the page are 3d models baked with the animation ahead of time. Here BrainStem.glb has an animation clip baked in.

I need to pick up the animation and animate only on scroll.

 

Unfortunately, the animation begins as soon as the canvas for the model loads.
Any help will be greatly appreciated. Thank you!!

Here's the model https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/BrainStem/glTF-Binary/BrainStem.glb

Here's a sandbox of the issue: https://codesandbox.io/s/intelligent-haibt-6jq3qk?file=/src/App.js:437-456

I've already seen these examples: 

I'm unable to understand how to tweak it for my project...

App.js BrainStem.js Box.js

[Cassie]

Heya!

 

If I'm understanding correctly - I think you just need to move the start position?

Currently the start position is 'top center' which means 'when the 'top of the canvas hits the middle of the viewport'. When your page loads the top of the first canvas is already positioned past the middle of the viewport so the animation has already started 

 

If you move the start lower down, maybe to 'center center' - (when the center of the canvas hits the center of the viewport.) Then it will wait until you scroll before starting.

[Cassie]

like so 👀

https://codesandbox.io/s/shy-breeze-i5ogdw

[sridharan]

@CassieThank you for trying this problem out. Let me clarify better.

Let us ignore the cube for now. 

My problem statement: When we scroll far enough in the first canvas but have not entered the second canvas, the 3d animation is already playing in the second canvas. The second canvas contains a 3d model with a baked in animation, trying to control based on scroll position.

At this scroll position, the 3d model has already started animating.

[Cassie]

Oh ok! I see.

I don't really understand how the animation's playing in the first place seeing as it's a baked in animation. Looks like you need to pause it and just let GSAP handle the animation. But again, as GSAP's not handling that animation I'm not entirely sure how to help. 

We try to keep these forums to GSAP specific questions, but maybe someone will jump in with some knowledge.