Animating Blender Objects On Scroll

So, I’m building a website for a client using objects I’ve exported from Blender. These objects have animations. They are many objects that each have animations that work together as a whole. So many different animations that create one object essentially.

However, I want to do what the following website does:

Just as in the website I’ve shared, I need to be able to animate on scroll - forwards and backward.

The website I’ve shared seems to add/remove objects as the sections are updated, so any guidance on doing that would be greatly appreciated!

I figured it out.

So apparently, you CAN use the same mixer for multiple objects and their animations if you’re simply allowing them to play out their animations.

However, when you have multiple imported objects that all need to be animated on scroll, you CAN NOT use the same mixer. You have to create different mixers if you want to be able to scrub their animation onScroll or via any other stimuli.

The same mixer can be used for all objects if you’re only animating them, but if you want to control and scrub through each animation onScroll, you have to use separate mixers to get that to work properly.

Otherwise for whatever reason, if you pass the objects via loop you’ll only be able to scrub the last object passed.

Related topic: Three.js + Gsap ScrollTrigger