Camera Movement In Three.js Using GSAP

[@JulsGeekPI]

What I like from GSAP is that at least they say that it is no open source, not like the doublespeak open source term in many other companies.

[@RobertWildling]

Wonderful! Thank you very much! It seems, though, there are some problems with the wings' placement. There are situations when they should cover the dragon's body. Why is this happening? Will you address this problem later in your tutorials?

[@nedapaz]

I didn't know this was a thing, actually I was creating the animations on blender, but I was wondering how I could stop them at specific moments, for example, when scrolling over certain text, resuming them later, and overall, creating a start point where multiples animation could meet to create a seamless transition between them (this would have been a pita). This solves all that hassle, just being able to quickly create animations from point A to point B and easily combining them. Thanks for the quick tutorial! Very appreciated

[@ChrisRodriguez9694]

Can you make a tutorial on how to use ScrollTrigger and scrub to play an animation on a model imported from blender ?

[@WaelYasmina]

I'll consider it. Thank you for the suggestion

[@ChrisRodriguez9694]

@@WaelYasmina Thank you for your awesome videos!

[@ikidtech]

yea this would be cool

[@antoniofuller2331]

Awesome! You are ridding my system of its imperfection!!

[@WaelYasmina]

Great to hear!

[@antoniofuller2331]

Your vision is clear

[@M4rt1nX]

I've been looking for this exact tutorial, 😭😭 Thanks a lot!!!

[@thanzeersalim9523]

can you make a video about using mediapipe and three.js handgesture facegesture would produce 3d objects and feel some augmented reality

[@levymerino9331]

Thank u.

[@_sweetBreeze]

Thank you! This is exactly what I've been looking for.

[@WaelYasmina]

Glad to hear it!

[@marlonalves6808]

thanks for the tutorial! I'm using vscode for windows, how do you import this gsap library?

[@danieljulien4099]

great explanation, great video! thank you 👌🏾

[@webghoul]

There was an error when i tried npm install gsap in my project directory and imported that way it showed this error: Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

[@WaelYasmina]

Are you using Parcel?

[@webghoul]

@@WaelYasmina no i am not

[@WaelYasmina]

Ah I see. Then don't use import. Use a script tag in your html file and set the path to the gsap.js file instead.

[@clementv4171]

Hello thank you for your video it help a lot on my project. I was wondering can you animate the lookAt function to pan the camera ?

[@WaelYasmina]

I think you can, you just need to use the onUpdate function in GSAP to keep updating the values passed to the lookAt function. Example: const obj = {a: 0}; tl.to(obj, { a: 20, duration: 8, onUpdate: function() { camera.lookAt(0, obj.a, 0); } }); Something like this...

[@clementv4171]

@@WaelYasmina okay thanks a lot, I'm gonna try that.

[@achreflegend4335]

bro can u do a video on baking blender's procedural materials and using them in react-three-fiber ? its way too specific but it would help

[@WaelYasmina]

I would love to but I'm still a novice when it comes to Blender unfortunately. I'm pretty sure you can find some good tutorials on KZbin.

[@achreflegend4335]

@@WaelYasmina thank you for the reply and sa7a s7orek :D

[@MrMateo171]

Nice video, but you need to read more documentation about Gsap... you're using timeline incorrectly. Read about 'Defaults' in timeline.

[@HuynhLuong227]

thank you, is use when scroll website ?

[@WaelYasmina]

Hi Huynh, thank you for your kind comments. Absolutely! Combine this with something like GSAP Scrolltrigger and you're good to go.

[@HuynhLuong227]

@@WaelYasmina yes, many thanks

[@kira3821]

do you know how to insert camera.vmd?

[@thedyslexicwebdev1654]

Great!!

[@WaelYasmina]

Thank you!