Creating animations in the editor, manipulating children in glb files, triggering children with GSAP scroll trigger

Questions
,
1

Hi everyone!

I’m new to this forum and a designer by training. I only began learning Three.js this week (mostly through Superhi and YouTube), so I apologize if my questions are too basic, but have searched everywhere and I can find no answers, so here I go:

  1. Is there a way to create animations in the Three.js editor? Seeing the examples in it, I thought there would be, but I can’t find the functionality in the commands.

  2. If there isn’t, and I’ll need to type the animation, I’d need to change the position of different meshes within the same glb file. Can I manipulate them independently and how do I do that? For example, I have a word where each glyph is a separate mesh and a child of “Text”, and I want each glyph to start from a different position and end assembling the word. The meshes are numbered 0 through 6 and they’re named “Glyph 1” through “Glyph 7”. Where can I find the correct syntax to move each?

  3. Is it possible to trigger the animation of children in a scene on scroll, specifically with GSAP scroll trigger? Or can you only trigger the animation of the entire scene?

Thanks in advance for you help!!!

2

If you are referring to animations similar to GSAP then no. However, you can create for each node in your scene graph a script that transforms object in arbitrary ways (and thus animate objects).

I suggest you create a script on the top-most glTF node and then query your glyph objects via Object3D.getObjectByName(). You should then be able to implement any object transformation you like.

I think this thread and the respective live example should help: Three.js + Gsap ScrollTrigger

But notice that it is not possible to include third-party scripts into the editor. If you need GSAP for animations, you have to copy the editor source into your project and implement a custom enhancement.

3

Thanks so much! Will try what you’re suggesting.

1 Like