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

Share this post


Link to post
Share on other sites

Thank you Sahil,

 

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

 

 

Share this post


Link to post
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 5
  • Thanks 1

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

excellent work, Sahil. Silky smooth!

  • Haha 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×