Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

Hi everyone,

 

Could someone help me, I want to make a button effect like in this example. Please see the top-left circle menu:

http://www.superbeparis.com/#!/

 

On mouse enter button follow the mouse and scale and on mouse leave animate to the initial position.

 

Thank you guys

Link to comment
Share on other sites

Thank you Sahil,

 

This is what I was looking for. Thank you again!

  • Like 1
Link to comment
Share on other sites

If I use multiple buttons inside a slider, the first is ok, the second move double size, the this move triple size.

 

Updated: Solved

Link to comment
Share on other sites

Hi Sahil,

 

If I use this burger menu on a fixed header and page has scroll then is a problem. Do you know how to fix it?

 

Thank you!

Link to comment
Share on other sites

Please post a codepen demo to show what exactly is happening, without demo it is hard to suggest anything.

Link to comment
Share on other sites

  • 2 months later...

Hey Sahil,

 

Can you help me to achieve this effect on mouse move and mouse enter ball-circle like in this example:

https://bullyingandbehavior.com/

 

Make hover over the burger, audio bars and arrow on left-bottom.

 

Thank you in advance

 

 

Link to comment
Share on other sites

Hi Hector,

 

Do you have a demo of your progress so far? Is there something related to GSAP that you are stuck with?

Please understand that guys like Sahil are happy to point people in the right direction and explain the GSAP API.

However, its quite different to build complex animations from scratch so hopefully you will understand that the people offering free help here can only do so much. 

 

 

  • Like 1
Link to comment
Share on other sites

I've made a codepen test:

 

See the Pen mXrWLV by Hector18 (@Hector18) on CodePen

 

Here is the example:

https://bullyingandbehavior.com/

 

When you move the mouse over the left bottom link, the circle scale up and align with the arrow. When you move the cursor over the arrow, the circle parallax it with the arrow.

 

 

The same effect I want to create.

Thanks in advance for help!

 

  • Like 1
Link to comment
Share on other sites

Nice demo. The effect you are after is rather complicated, and again, not something that we can easily (or quickly) produce for you as it is going to take quite a bit of logic and calculations that are way beyond what GSAP handles. Again, we just have to stay very focused on the GSAP API and the mechanics of animation.

 

The good news is that @smallio seems to be on a similar mission as you and has made some fantastic progress.

As you can see from his code, it isn't a simple undertaking especially when you want the effect to work on multiple elements.

That said, there is still a lot to be learned from his example

 

 

Link to comment
Share on other sites

After responding to your PM that I won't be able to do it because it will be time consuming I still gave it a try because it bothers me to give up in the middle.

 

In following demo I have just re-implemented the mouse movement and implemented the cursor and target parallax. You should be able to reuse it for multiple elements though i haven't tested it myself, I have just copied your button element to check if it works on multiple elements. Though I don't know what you meant by " the circle scale up and align with the arrow ", if you meant something like morphing around the the target element then you will have to take completely different approach and perform some tests to figure out how you will use SVG throughout the project.

 

See the Pen MQbdNR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Though will need to use pointer events instead of just mouse events, in following thread you can see how you can use polyfill and use pointer events.

 

 

Another thread that shows somewhat similar cursor effect and there is one demo by @OSUblake that shows how you can use SVG, I think you can use that demo to further implement any morphing effects.

 

 

Again, some of the calculations can be done differently and code can be refactored but you will have to dive in completely to actually use it in your project. And like @Carl said it is really hard to provide answers to such questions, plus without any demo or prior work it makes it harder. Usually it is fine to post such questions for help or guidance but at the same time you should keep working on your problem and post any progress you made, it only helps yourself to learn and get answers. All the best.

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

Thank you Sahil. Now I'm able to apply parallax effect to multiply elements with the same class without duplicate the same function! Thank you again!

Link to comment
Share on other sites

excellent work, Sahil. Silky smooth!

  • Haha 1
Link to comment
Share on other sites

1 hour ago, Sahil said:

After responding to your PM that I won't be able to do it because it will be time consuming I still gave it a try because it bothers me to give up in the middle.

 

In following demo I have just re-implemented the mouse movement and implemented the cursor and target parallax. You should be able to reuse it for multiple elements though i haven't tested it myself, I have just copied your button element to check if it works on multiple elements. Though I don't know what you meant by " the circle scale up and align with the arrow ", if you meant something like morphing around the the target element then you will have to take completely different approach and perform some tests to figure out how you will use SVG throughout the project.

 

See the Pen MQbdNR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Though will need to use pointer events instead of just mouse events, in following thread you can see how you can use polyfill and use pointer events.

 

 

Another thread that shows somewhat similar cursor effect and there is one demo by @OSUblake that shows how you can use SVG, I think you can use that demo to further implement any morphing effects.

 

 

Again, some of the calculations can be done differently and code can be refactored but you will have to dive in completely to actually use it in your project. And like @Carl said it is really hard to provide answers to such questions, plus without any demo or prior work it makes it harder. Usually it is fine to post such questions for help or guidance but at the same time you should keep working on your problem and post any progress you made, it only helps yourself to learn and get answers. All the best.

 

Brilliant work dude!!! I've been working on the solution myself but hadn't got this far... wow.

 

Thank you so much for taking the time to help out :)

  • Like 2
Link to comment
Share on other sites

little tip: no need to quote entire posts in replies. keeps the thread easier to read. thx!

  • Like 3
Link to comment
Share on other sites

  • 2 years later...

Hi @Carl @Sahil. I used something similar that the third post.

I am trying now to get rid of jQuery but my knowledge is very limited. 

I want to use vanilla JS and have more than a single button (two) use the same magnetic function.

To achieve this correctly, I have to find the magnetic area and magnetic content inside the magnetic wrap I am currently hovering, which I don't know how to do correctly in vanilla JS. (See second example).

 

This example works fine on vanilla JS.

See the Pen xxVvbRN?editors=0010 by esadrian (@esadrian) on CodePen


Second example with two buttons on vanilla JS (NOT WORKING)

See the Pen YzyrJbO?editors=0010 by esadrian (@esadrian) on CodePen


Second example with two buttons on jQuery (Working bad: after too many hovers on the element, the magnetic duration seems instant.)

See the Pen PoPKGZJ?editors=0010 by esadrian (@esadrian) on CodePen

 

 

Link to comment
Share on other sites

Hey @heyitsA. I highly recommend my article about animating efficiently which covers how to create animations efficiently in vanilla JS.

 

The first error in your demo is that you have all your code in a function that never runs! Remove the function(){ at the top will get you started fixing errors because the errors will show up in the console :) 

Link to comment
Share on other sites

thanks @ZachSaucier. It's been a good 4 hours trying every possibility I was feeling helpless, I am so bad at JS. You posting the solution in 5 mins is mindblowing.

Now that I have you here: how would you make to make the button magnetic but on the red area only? Probably a totally different function there, but how...

Link to comment
Share on other sites

12 minutes ago, heyitsA said:

how would you make to make the button magnetic but on the red area only?

It already does that? What do you mean?

Link to comment
Share on other sites

11 minutes ago, ZachSaucier said:

It already does that? What do you mean?

I mean the center of the content (the ball) same position as the cursor.

Link to comment
Share on other sites

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:

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

  • Like 1
Link to comment
Share on other sites

For mouse follow effects like this it is better for performance if you use .quickSetter() instead of tweens.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Hey @ZachSaucier I'm back with this topic trying to make it with the .quickSetter() with the help of other demos but I don't know how to achieve it. 

 

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

 

  gsap.to(wrap.mContent, {
    x: (relX - boundingRect.width / 2) * movement,
    y: (relY - boundingRect.height / 2 - scrollTop) * movement,
    ease: "power1",
    duration: 0.6
  });

 

var xSet = gsap.quickSetter(wrap.mContent, "x", "px");
var ySet = gsap.quickSetter(wrap.mContent, "y", "px");

 

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.
×