How to make a mouse follower with elastic effect?

[ayank007]

Gsap is accepting Power1/Power2 as easing effect for the mouse follower but not accepting elastic easing.

See the Pen NWLjxYK by ayank007 (@ayank007) on CodePen

[Rodrigo]

Hi @ayank007 and welcome to the GreenSock forums!

 

This fork of the quickTo() example should help:

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

 

You can read more about it here:

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

 

Hopefully that's enough to get you started. Let us know if you have more questions.

Happy Tweening!

[ayank007]

17 hours ago, Rodrigo said:

Hi @ayank007 and welcome to the GreenSock forums!

 

This fork of the quickTo() example should help:

 

 

 

You can read more about it here:

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

 

Hopefully that's enough to get you started. Let us know if you have more questions.

Happy Tweening!

Thanks,
The demo is working for just "elastic". What can I do to config like "elastic.out(1, 0.3)"?

[Rodrigo]

Hi,

 

Just use the particular elastic config you want to use. That is just a better way to create repetitive GSAP instances nothing more, the configuration options are the same:

let xTo = gsap.quickTo(".ball", "x", {duration: 0.6, ease: "elastic.out(1, 0.3)"}),
    yTo = gsap.quickTo(".ball", "y", {duration: 0.6, ease: "elastic.out(1, 0.3)"});

Happy Tweening!

[ayank007]

Thanks man, I swear it wasn;t working on first try

 

[Rodrigo]

No problemo! 👍

 

Let us know if you have more questions.

Happy Tweening!