How to tween between two values without target object?

[Aleksei 16 Likes (Newbie)]

The question is regarding the GSAP 3.
How can I interpolate between two values using gsap properties such as easing, duration, delay etc?… And I don't need actual target object to animate. I've embedded Codepen example of how I did this before, with TweenMax. But when I use gsap 3 syntax JS console generates error telling that target is undefined.

 

I assume that  .interpolate() utility may come in handy here. But I cannot understand how to apply it in this case.

Please, help

 

See the Pen GRgZvmd by nordskill (@nordskill) on CodePen

[OSUblake 18,475 Likes (Superhero)]

It works the same. The difference is the target property.

function updateOutput() {
  const value = Math.round(this.targets()[0].degree);
  output.innerText = value;
}

// if you know the target, this is much simpler
function updateOutput() {
  const value = Math.round(bar.degree);
  output.innerText = value;
}

 

To use interpolate, you can do this.

 

See the Pen 3761294853fef89c19b7ab856f2cf5fa by osublake (@osublake) on CodePen

 

I think the first way is better for a use case like this.

[GreenSock 18,251 Likes (Superhero)]

For the record, I think you could even simplify it to this in GSAP 3: 

See the Pen 47743f6ecbf4dd6f4023117e59441e58?editors=0010 by GreenSock (@GreenSock) on CodePen

 

gsap.to("#output", {
  duration: 5,
  innerHTML: 360,
  snap:{
    innerHTML: 1
  }
});

 

[Aleksei 16 Likes (Newbie)]

Cool approach, Jack  But OSUblake's example fits me better because I'm dealing with canvas animation.

Nevertheless, I've stumbled upon another problem here. The bar.degree variable acts in a strange way. Please, check the Codepen example below. Here I use loadProgress() function to simulate XMLHTTPRequest's .progress() output.

The numbers below the canvas preloader are showing the length of progress bar on each update. As you can see the weird thing happens at the end (after 80% is loaded). The bar stops and the actual value reaches 0. I can't get what causes this. This didn't happen with GSAP 2 before.

 

See the Pen OJPNwRb by nordskill (@nordskill) on CodePen

[OSUblake 18,475 Likes (Superhero)]

It looks like the problem is that you are animating the progress down to 1. Try changing the degree to 100.

gsap.to(bar, {
  duration: 0.2,
  degree: 1, // change this to 100
  onUpdate: drawState,
  onComplete: hidePreloader
});

 

[Aleksei 16 Likes (Newbie)]

Oh, right, it's just a stupid mistake from my side ☺️
But why the bar doesn't actually animate back to 1?

[Aleksei 16 Likes (Newbie)]

I found the solution for the case. I've changed the animate() function in the way as shown below. But I still don't get what happened in the previous example and why the bar freeze.

 

function animate(float) {

  let duration = 1;
  let hideFunc = null;

  if (float >= 1) {
    duration = 0.2;
    hideFunc = hide;
  }

  gsap.to(bar, {
    duration: duration,
    degree: gsap.utils.interpolate(0, 360, float),
    onUpdate: drawState,
    onComplete: hideFunc
  });

}

 

[OSUblake 18,475 Likes (Superhero)]

39 minutes ago, Aleksei said:

But why the bar doesn't actually animate back to 1?

 

You're not creating a new path, so it's getting added to the previous rect.

ctx.clearRect(0, 0, 100, 10);  
ctx.beginPath();
ctx.rect(0, 0, bar.degree, 10);
ctx.fill();

 

Or even simpler.

ctx.clearRect(0, 0, 100, 10);  
ctx.fillRect(0, 0, bar.degree, 10);