TweenMax.updateTo() in GSAP V.3.X?

[gaggo 12 Likes (Newbie)]

Hi there, I used to use TweenMax.updateTo() like described here:

 

https://greensock.com/docs/v2/TweenMax/updateTo()

 

How would I solve this using the new gsap Version 3? I'm using npm with the bonus packages.

[ZachSaucier 7,162 Likes (Superhero)]

Hey gaggo. Could you please give us some context (hopefully a simple CodePen)? We're happy to be happy to help craft a solution. It should be entirely doable with some custom code but TweenMax.updateTo() was rarely used by anyone and we cut it to reduce file size and API surface area

[gaggo 12 Likes (Newbie)]

Hi Zach, thanks for your swift answer! 

 

I made a pen with gsap 2.x:

 

See the Pen yLeaYwR by hirasso (@hirasso) on CodePen

 

Basically I want the position of my mouse (or devicemotion on mobile) not to be applied immediately, but rather with gsap's great easing capabilities.

 

I'd like to migrate this to GSAP V.3

 

 

[ZachSaucier 7,162 Likes (Superhero)]

For that sort of thing we recommend using GSAP 3's quickSetter() for performance. We even have a mouse follower demo on the docs page for it  https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

 

You're free to edit your previous messages as you see fit, though we ask that you don't make the posts completely unusable for future readers  

[gaggo 12 Likes (Newbie)]

Ah, I see... in the quickSetter mouse follow example, I can see the good old dummy ease I always used back in the days:

 

pos.x += (mouse.x - pos.x) * speed;
pos.y += (mouse.y - pos.y) * speed;

So no more support for GSAP's great easing functionality? I especially love `CustomEase` ...

[ZachSaucier 7,162 Likes (Superhero)]

55 minutes ago, gaggo said:

So no more support for GSAP's great easing functionality? I especially love `CustomEase`

Of course you can use CustomEase instead. Easing functions are just functions that take a number between 0 and 1 and return a number between 0 and 1  

 

If you're going to do that then it likely makes more sense to use tweens that kill off previous tweens:

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

[gaggo 12 Likes (Newbie)]

Wow Zach, things can be so simple!!  This is what totally solved it for me:

 

tweenMousePosition(newPos) {
  gsap.to(this.mousePos, 0.8, {
    x: newPos.x,
    y: newPos.y,
    onUpdate: () => this.adjustMask(),
    ease: "power4.out",
    overwrite: "auto"
  });
}

Thanks so much for your help!!