Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aleksei

How to tween between two values without target object?

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

 

  • Thanks 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

}

 

Link to post
Share on other sites
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);

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×