Jump to content
Search Community

Scroll based animate using scrolltrigger with threejs

Guest
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

  • Solution

 

First off you'd have to make sure there is scrollable space - either by adding some element to your HTML that would allow for scrolling or by utilizing a pinning ScrollTrigger - then tween what you need with that. Here is an example of what that could look like.

 

gsap.to(camera.position, {
  z: -10,
  ease: "none",
  scrollTrigger:
  {
    trigger: renderer.domElement,
    start: 'top top',
    end: '+=500%',
    pin: true,
    scrub: true   
  },
  //onUpdate: function () {
  //  camera.updateProjectionMatrix();
  //}
})

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

 

Hope that helps.

 

On a sideonte: you are loading multiple instances (gsap and tweenmax) in that pen and you should probably avoid that.

 

  • Like 2
Link to comment
Share on other sites

2 minutes ago, leenalfalah said:

that all i need to move in scene? 

 

Are you asking if that is all you need to move in the scene? ...I couldn't know what it is you want to do - so I couldn't tell.

Maybe I don't really understand what it is you are asking, though - could you please try and rephrase?

 

Link to comment
Share on other sites

1 minute ago, leenalfalah said:

I apologize, but my English is bad

 

No need to apologize :) 

 

If you want it to feel like a person moving around, then probably yes; you should think of the camera as the persons' eyes, so the camera position is what you'd want to animate (preferably on the x and z axes - and if you want to fly or dive benaeth the scene then the y axis).

 

  • Like 2
Link to comment
Share on other sites

3 minutes ago, akapowl said:

 

No need to apologize :) 

 

If you want it to feel like a person moving around, then probably yes; you should think of the camera as the persons' eyes, so the camera position is what you'd want to animate (preferably on the x and z axes - and if you want to fly or dive benaeth the scene then the y axis).

 

that all i want to hear , thaaaank you

 

Link to comment
Share on other sites

15 minutes ago, leenalfalah said:

that all i want to hear , thaaaank you

 

I'm not saying it is like that (only having to tween the camera position).

 

To me it looks like the camera in this scene is set to lookAt the center of the scene, so that is something you would probably have to consider changing if you wanted to roam around freely without restrictions - but that is more of a three.js related thing and not related to GSAP.

 

  • Like 1
Link to comment
Share on other sites

9 minutes ago, ZachSaucier said:

Scrolling is only one dimensional. So if you want to translate that into 3D space you'd need to give it at least a 2D path along with proper camera aiming or you could give it a 3D path if necessary. 

 there  is any example to that ?, 

Link to comment
Share on other sites

There are syntax errors preventing that demo from running.

 

Regardless, please make minimal demos when sharing to this forum if you'd like coding help, i.e. remove everything not directly related to the question.

 

Additionally please use the "fork" button when editing demos that have been shared to these forums so that context is not lost for future readers. Thanks.

 

Link to comment
Share on other sites

14 minutes ago, akapowl said:

 

You could also just remove all related to the .lookAt in the setup and combine tweens on the camera.position and camera.rotation (probably best in a timeline) and you can move in about anyway you'd like.

 

 

 

 

Oh , thank you , but i guess using camera lookat that good for view , thank you Mr 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

That's still not very minimal... We don't need to see all of your models or lighting or animated deer. Demos should be focused on the issues being asked about.

 

But what's wrong with your demos? It's animating the camera position as you're telling it to...

Yes , it may be i cannot move to all position i want but , Mr @akapowl tell me a good way , i will try , thank you

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...