Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nmarketti

SVG Button Effect

Recommended Posts

I'm trying to create a specific button effect when you hover over it. See Image Attached

Basically once  you open hover on the button it opens on the right and the arrow slides out right. Is there a way to open both ends at the same time on hover for the SVG? 

circle-1.png

Link to post
Share on other sites

I tried forever tinkering with DRAWSvg. Thank you so much!

 

8-)

  • Like 2
Link to post
Share on other sites

Yeah - the trick is just make sure your circle start point is where you want it to open. There are various ways to go about that. We have a big thread talking about circle start points that you might find helpful too.

 

Happy tweening.

:)

 

  • Like 3
Link to post
Share on other sites

Awesome. Was able to get it setup and working :) Works great. That article you sent was very insightful. Thanks for sharing. 

 

Quick additional question though for you. I am creating this as a button to be re-used throughout several pages. The current setup is using

 

document.querySelector

 

This only selects the first instance on the page. I was looking into different selectors...but to no avail. Does this have to be written differently to activate on any class that has the label "#Trigger"?

 

Link to post
Share on other sites

If you have multiple buttons, you'd want to loop through and create a timeline for each one. Something like this:

 

See the Pen xWRLxN by PointC (@PointC) on CodePen

 

I'm using jQuery each(), but if you aren't using jQuery, you can use the querySelectorAll() method to get all the triggers and loop through that NodeList too.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to post
Share on other sites

Ah. This makes sense. I read through the code and understand what's going on now.

I'm still fairly new to all this, so thanks for your support!

Cheers!

  • Like 2
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×