cidwings Posted August 30, 2020 Share Posted August 30, 2020 Hi ! I have a problem for tweening my camera . I create a codepen with the minimum of code just to reproduce my issue and I annotate all my code (sorry for my English I'm french by the way ^^ ) I also put a lot of console.log() for debugging purpose . the question is at line 75-122 the start point is my camera.postion line 23 : camera.position.z = 30; and my tween001 line 75 : var tween001 = gsap.to(camera.position,{ delay:2,duration:5,z:60,onUpdate:function(){ camera.updateProjectionMatrix(); console.log("play"); },onComplete:function(){ console.log("complete"); },ease:"elastic" }); so the tween is about to move my camera from the Z = 30 to Z = 60 its work perfectly but ... When the user move the camera(line 90: when the user move/over/click on the 3d its fire and eventlistener that pause "tween001.pause()" ) I want the tween001 use the "actual" camera.postion and not when the camera.postion used when the tween 001 get fire . Cause when the tween001 is played again or it resume from a pause the start point used is the default one x=0 y=0 z=30 . An idle function play the tween001 again at line 109 window.setInterval(checkTime, 1000);// every 1 second lauch checktime function checkTime() { //idleCounter get 1 every second and at 5 second coz timeout is 5 checktime relauch the tween001 if (idlecounter < timeout) { idlecounter++; //console.log("++ "); } else if (idlecounter == timeout) { tween001.play(); console.log('timeout'); } } Any help will be welcome See the Pen PoNjVvL?editors=0011 by cid-wings-the-encoder (@cid-wings-the-encoder) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 31, 2020 Share Posted August 31, 2020 Hey cidwings and welcome to the GreenSock forums. Often times when you're trying to do these sorts of animations it is helpful to animate two different layers instead of just one to reduce conflict. In other words you could animate a container/group and an element (in this case the camera) inside of it. So you could create a group, put the camera inside of it, animate the position of the camera using either the tween or the user input, and animate the group's position using the other one. That way they could both run, even at the same time, and there'd never be an issue. Does that make sense? Alternatively you could not use a group and just create a tween that affects the camera's position using relative values (like z:"+=60") once the user input has stopped. 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