How can I use quickSetter() or set() to improve the performance of that code?

[bs.choi]

Hi.
I made a custom cursor with gsap.TweenMax.

However, looking at a few examples, they are created using set() or quickSetter().

The official documentation says there is a performance difference, so I would like to improve the performance.

But I'm not sure how to refactor it. (I want to keep the function as it is)

Please advise.
thank you.

 

https://jsfiddle.net/5dpzhfe0/28/

[OSUblake]

You would need to update to version 3+. quickSetter is not available in version 2.

 

[bs.choi]

@OSUblake opps, Sorry, I spelled the wrong version. I'm using version 3 in my project right now.

 

https://jsfiddle.net/5dpzhfe0/28/

[OSUblake]

If you want to use the quickSetter, we have a demo that you should be able to adapt.

 

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

 

You just need to create x and y setters for your additional elements and then do similar calculations in the gsap.ticker part. Each element should have a different speed value.

 

[bs.choi]

@OSUblake 

I saw an example and implemented it.

However, additional elements are moving at the same time.

Is this method wrong?

I've looked at the official documentation, but I don't know how to add duration or delay.

I want to make a clean and fast (without a lot of easeing) function like the example I asked in the first question.

https://jsfiddle.net/b5t9jxh6/4/

 

gsap is so amazing and awesome but still too hard for me....

[Cassie]

2 hours ago, bs.choi said:

However, additional elements are moving at the same time.

Heya!

I don't understand what you mean by this - could you explain what you're trying to do?

 

Your demo looks fine to me. ✨

[OSUblake]

Each element needs it own position object.

 

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

 

But if you need a delay or a different easing, then you should probably just keep the code you have. The quickSetter is not meant to replace all the functionality of tweens.