Get the tween value of a time in the future above the time axis

[Eze]

  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

[Cassie]

sounds like you would need to add ease: 'none' so that it progresses linearly!

 

Hope this helps ✨

[GreenSock]

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!

[Eze]

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;

     }

[GreenSock]

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. 

[Eze]

Thank you for your reply, do not pause the tween when dragging, the tween is still running

[GreenSock]

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

[Eze]

It's very close now, I can't do it now, when onRelease, the div animation moves over, and now it jumps over instantly

 

 

 

 

 

 

 

[GreenSock]

Oh, you want it to fill the remaining time so it catches up? 

See the Pen WNavLKj?editors=1010 by GreenSock (@GreenSock) on CodePen

[Eze]

Thank you, is there a way to animate to the same position as box2 in 1 second after the mouse is lifted?

[GreenSock]

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!

[Eze]

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!

[GreenSock]

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); 

 

[Eze]

Thank you so much