Set progress smoothly

[Ahlecss]

Hi ! 

 

Hope you're all doing well,

 

I have a question but not much time to provide a minimal demo, so let me explain my question easily :

 

Let say I have a circle, and I want this circle, when an event fire, to change size, from 0px to 25px, or in reverse from 25px to 0, and when another event fire, from 25px to 100px, and also in reverse from 100px to 25px.

 

I can just create for example two timelines, with a .fromTo(), pass my start and finish values, and use it with the play() and reverse() methods, which works well.

 

But what if I want my circle to change from 25px to 100px ?

 

My first idea was to control the progress(), just by tweening it from let's say : 0.25 to 1. But there is no such thing done smooth (the progress() methods is just a setter).

 

How can I do it with elegance, without creating a third timeline ?

 

Have a nice day !

Thanks !

[Rodrigo]

Hi @Ahlecss and welcome to the GSAP Forums!

 

Yeah without a minimal demo is not really easy for us to see what could be the problem.

 

Keep in mind though that GSAP can tween any numeric value of any object. A GSAP instance is an object and progress is a numeric value so you can tween the progress of a GSAP Tween!

const t = gsap.to("#circle", {
  width: 100,
  ease: "none",
  paused: true,
});

// Then tween the progress
const clickHandler = (value) => {
  gsap.to(t, {
    progress: value, // between 0 and 1 of course,
    duration: 0.5,
    ease: "power1.inOut", // Any easing function you want here
  });
};

Doing this without creating a new GSAP instance is just not possible. Maybe you could look into creating a re-usable quickTo instance:

https://gsap.com/docs/v3/GSAP/gsap.quickTo()

const t = gsap.to("#circle", {
  width: 100,
  ease: "none",
  paused: true,
});

const pTo = gsap.quickTo(t, "progress", { duration: 1, ease: "power2" });

// Then tween the progress
const clickHandler = (value) => {
  pTo(value);
};

 

Hopefully this helps.

Happy Tweening!

[Ahlecss]

Hi Rodrigo !

 

Thanks ! I think quickTo will do the trick !

 

Can I just ask you if it's possible to change dynamically the duration of the quickTo ?

I did something like this, but it doesn't seems to work.

 

const pTo = (value) => {
  gsap.quickTo(tl, { progress: value,  duration: value, ease: "power2" });
}

// When a specific event fires
  pTo(0.25);

// Another event
  pTo(0.75);

 

In fact, I would like to mimic the same timing approach as tl.play() and tl.reverse() could do

 

Have a nice day !

[Ahlecss]

And also !

 

I would like to fire a callback, when eventually the original timeline is complete. But by setting the progress with quickTo(), the callback seems not to be called. How can I perfom that ? (I have an idea with a check of the progress in the onUpdate() callback, but I don't think it's the most performant solution.

 

Have a nice day ! 

[Rodrigo]

13 hours ago, Ahlecss said:

Can I just ask you if it's possible to change dynamically the duration of the quickTo ?

I believe that it can't be done. Duration is a read only value on every GSAP Tween, so a quickTo shouldn't be any different as far as I can tell.

 

12 hours ago, Ahlecss said:

I would like to fire a callback, when eventually the original timeline is complete. But by setting the progress with quickTo(), the callback seems not to be called. How can I perfom that ?

This seems to work in this codepen demo (open it in a new tab and open the console):

See the Pen WNWaBxb by GreenSock (@GreenSock) on CodePen

 

Once again, without a minimal demo we can't really tell what the issue actually is.

 

Happy Tweening!