Jump to content
Search Community

ThreeJs with gsap

Guest
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello, have a nice day , i have problem with control in three js and gsap , any one know tutorial  for this? 

for example i want to zoom camera with scrolling but i don't know how , and many thing like this , 

this is my code `

   .to(camera.position2, {
        y: -11.1duration: 2,
    }, "simultaneously")

`  

Link to comment
Share on other sites

  • Solution

Hey leenalfalah. You can animate the camera's position just like any other object. For example:

See the Pen oNYmKQa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you want to do something on scroll, you probably want to attach a ScrollTrigger. Probably something like this:

See the Pen GRNzVPV?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

@ZachSaucier Thank you very much , it little work , but i can just play with camera position or rotation ?? , what if i want to zoom it with ` camera.zoom= number `  ,  and thank you for your time and replay 

 

Link to comment
Share on other sites

 

Hey @leenalfalah

 

Google led me to this:

 

https://discourse.threejs.org/t/animate-camera-zoom-and-controls-target/16583

 

And it indeed does seem to work

 

See the Pen e595e13b0cfcd9f289ae2ae5c016745d by akapowl (@akapowl) on CodePen

 

 

I'm not sure, wether the onUpdate is best to be placed inside the scrollTrigger-object or outside of it, though (or if it would make a difference).

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...