Guest Posted March 18, 2021 Share Posted March 18, 2021 HI again , i saw this sample in codepen and i want to move into ground (like walking) by scroll using scroll trigger , any one can help ? See the Pen MWbdNXg by leen-alfalah (@leen-alfalah) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 18, 2021 Share Posted March 18, 2021 Hey @leenalfalah For me your codepen only shows a button (no matter how long I wait for the scene to load) and also it throws multiple errors. So I think you'll have to update it first if you'd like any input on this. 1 Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 @akapowl Hey , my bad , when i posted my problem i saw it , fixed any way Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 18, 2021 Solution Share Posted March 18, 2021 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. 2 Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 I know there are too many lines of code , you can ignore it and go to last section on `//gsap` Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 @akapowl You lead Mr , thank you ,that all i need to move in scene? Link to comment Share on other sites More sharing options...
akapowl Posted March 18, 2021 Share Posted March 18, 2021 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 More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 I apologize, but my English is bad, I wonder if this is all I need to move between different places in the scene while I scrolling @akapowl Link to comment Share on other sites More sharing options...
akapowl Posted March 18, 2021 Share Posted March 18, 2021 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). 2 Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 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 More sharing options...
akapowl Posted March 18, 2021 Share Posted March 18, 2021 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 18, 2021 Share Posted March 18, 2021 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. Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 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 More sharing options...
ZachSaucier Posted March 18, 2021 Share Posted March 18, 2021 Listed in the ScrollTrigger demos section is this demo which creates a 3D path and then scrolls through it. That's the only one I'm aware of right now, but the concept is fairly simple, there are different ways to approach it. 1 Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 @ZachSaucier Oh , think i start got it , i made this but still not like i can move to all positions in scene , is that cuz i'm not create 3d path ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 18, 2021 Share Posted March 18, 2021 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 More sharing options...
akapowl Posted March 18, 2021 Share Posted March 18, 2021 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. See the Pen fbc012a46c046f1c9444d39f14e73790 by akapowl (@akapowl) on CodePen 1 Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 @ZachSaucier Oh , sorry Mr , i clean some code , my bad , but i don't know about "fork" button , any way this is a demo i hope that work Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 18, 2021 Share Posted March 18, 2021 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... Link to comment Share on other sites More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 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 More sharing options...
Guest Posted March 18, 2021 Share Posted March 18, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now