Jump to content
GreenSock

Hector18

Follow button effect

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
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

Link to comment
Share on other sites

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
 

 

  • Like 1
Link to comment
Share on other sites

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.
 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×