Jump to content
Search Community

SVG Button Effect

nmarketti test
Moderator Tag

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

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 comment
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 comment
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 comment
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 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.
×
×
  • Create New...