Follow button effect

[ZachSaucier]

24 minutes ago, heyitsA said:

In my particular example,  where do I put the setters if I don't use tweens?

Anywhere after your wrap.mContent variable is set up. It probably would make sense to attach it to the wrap object like you're doing with the mContent variable.

 

If you're not having performance issues it's easiest to just use tweens like I have above. If you find it's not performing perfectly then you can switch to quickSetter but then you have to handle the tweening more manually.

[rajibola]

On 10/3/2020 at 12:14 AM, ZachSaucier said:

You need to change the calculations. That function is only build to work with elements that have the same width and height. 

 

I noticed that the offset is always the same no matter where you are on the rectangle. After some experimenting I realized it's half of the distance of the difference between the width and height. So add that difference to your x position and voila:

 

 

Please how can I create this with ReactJs

[Cassie]

Hi @rajibola

 

As we state in the forum guidelines we don't have capacity to create custom effects.

We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

These articles may be a good place to start
 

 

[rajibola]

Thanks @Cassie

I've been able to implement the mouse follow effect in react, but the issue is that I'm unable to hide the button on load.

 

Is there anyway to hide the button before touching the screen.