Eze Posted April 10, 2023 Share Posted April 10, 2023 const myObj = { x: 0 }; const myTween = gsap.to(myObj, { duration: 4, x: 100, }); const valueAt2s = myTween.vars.x * myTween.progress(2); console.log(valueAt2s); I expect valueAt2s=50 Link to comment Share on other sites More sharing options...
Cassie Posted April 10, 2023 Share Posted April 10, 2023 sounds like you would need to add ease: 'none' so that it progresses linearly! Hope this helps ✨ 2 Link to comment Share on other sites More sharing options...
GreenSock Posted April 10, 2023 Share Posted April 10, 2023 Yep, and you would want time() instead of progress() because progress() is always a value between 0 and 1, where 0.5 is halfway through the tween. const myObj = { x: 0 }; const myTween = gsap.to(myObj, { duration: 4, x: 100, ease: "none", paused: true }); myTween.time(2); const valueAt2s = myObj.x; console.log(valueAt2s); But if you're just trying to do your own interpolation, it's probably easier/cleaner to use gsap.utils.mapRange() or gsap.utils.interpolate() // map time (0-4 seconds) to a value range (0-100) const map = gsap.utils.mapRange(0, 4, 0, 100); const valueAt2s = map(2); console.log(valueAt2s); I hope that helps! 3 Link to comment Share on other sites More sharing options...
Eze Posted April 11, 2023 Author Share Posted April 11, 2023 Thank you for your reply, thank you very much! My code is as follows, the div moves from 0px to 500px, during this animation, the user can drag the div, pressSign=true while dragging, gsap doesn't change the position of the div, when the user stops dragging, pressSign=false, I I want gsap to perfectly keep up with the tl animation in the TODO place, and the animation of the position dragged by the user reaches tl instead of jumping to tl in 0 seconds let pressSign = false; let pressTime = 0; let divEl = document.getElementById('div') const val = { x: 0 }; const tl = gsap.timeline({ paused: true, }); tl.to(val, { x:500, duration:10 onStart: function () {}, onUpdate: function () { if (pressSign) return; divEl.style.left = val.x + 'px' }, }); function divElOnUp(){ clearTimeout(pressTime); pressTime = setTimeout(() => { // TODO pressSign = false },2000) } function divElOnDown(){ pressSign = true; } Link to comment Share on other sites More sharing options...
GreenSock Posted April 11, 2023 Share Posted April 11, 2023 I think you might be overcomplicating things. Are you looking for something like this?: See the Pen YzJXdqg?editors=0010 by GreenSock (@GreenSock) on CodePen You can press and drag the animating element anytime and it'll resume from the correct spot. Link to comment Share on other sites More sharing options...
Eze Posted April 11, 2023 Author Share Posted April 11, 2023 Thank you for your reply, do not pause the tween when dragging, the tween is still running Link to comment Share on other sites More sharing options...
GreenSock Posted April 11, 2023 Share Posted April 11, 2023 So you want the tween to just resume() when the user stops dragging, thus it would JUMP to wherever the tween says it should be at that point? See the Pen LYgVMzq?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Eze Posted April 11, 2023 Author Share Posted April 11, 2023 It's very close now, I can't do it now, when onRelease, the div animation moves over, and now it jumps over instantly Link to comment Share on other sites More sharing options...
GreenSock Posted April 11, 2023 Share Posted April 11, 2023 Oh, you want it to fill the remaining time so it catches up? See the Pen WNavLKj?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Eze Posted April 11, 2023 Author Share Posted April 11, 2023 Thank you, is there a way to animate to the same position as box2 in 1 second after the mouse is lifted? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 11, 2023 Solution Share Posted April 11, 2023 Yeah, that's definitely more complicated but totally doable: See the Pen gOBpqGx?editors=0010 by GreenSock (@GreenSock) on CodePen There are plenty of other ways to do it too. Good luck! 1 Link to comment Share on other sites More sharing options...
Eze Posted April 11, 2023 Author Share Posted April 11, 2023 Thank you, it's really more complicated. I thought there was an api that could get the tween value on the animation axis at a certain time in the future. I will study the sample code you gave, thank you very much! Link to comment Share on other sites More sharing options...
GreenSock Posted April 11, 2023 Share Posted April 11, 2023 4 minutes ago, Eze said: I thought there was an api that could get the tween value on the animation axis at a certain time in the future. Sure, I've already provided multiple ways you can do that. From earlier in this thread: const myObj = { x: 0 }; const myTween = gsap.to(myObj, { duration: 4, x: 100, ease: "none", paused: true }); myTween.time(2); const valueAt2s = myObj.x; console.log(valueAt2s); Even easier: // map time (0-4 seconds) to a value range (0-100) const map = gsap.utils.mapRange(0, 4, 0, 100); const valueAt2s = map(2); console.log(valueAt2s); Link to comment Share on other sites More sharing options...
Eze Posted April 11, 2023 Author Share Posted April 11, 2023 Thank you so much 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