Jump to content
GreenSock

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

GSAP 2 Draw svg icon on mouse hover

Recommended Posts

Hello,

I'd like to draw the icon on mouse hover. The purpose could be to draw with another colour the same paths. So when mouseout the icon is grey, when mousehover the icons paths stars draw themselves with a blue colour. Any suggestion about what's the best way to do it in GSAP 2 ?

 

Thanks so much in advance.

See the Pen QWGpzNY by ioiocodepen (@ioiocodepen) on CodePen

Link to post
Share on other sites

Hey,

 

@mikel showed you a really nice way to do this.

 

Key things to note: you will need two identical paths in your svg.

The newly drawn ones need to be set to hidden and drawSVG: 0 before the start of the animation.

 

Alternatively you can use tween.from() which sets the animation in such a way that the values you enter become the initial values and the animation proceeds to the values in your css/html.

 

See the Pen b1f0f163afe3340ac0ba930f5894d21a?editors=1010 by dadacoded (@dadacoded) on CodePen

  • Like 4
  • Thanks 1
Link to post
Share on other sites
54 minutes ago, tailbreezy said:

Hey,

 

@mikel showed you a really nice way to do this.

 

Key things to note: you will need two identical paths in your svg.

The newly drawn ones need to be set to hidden and drawSVG: 0 before the start of the animation.

 

Alternatively you can use tween.from() which sets the animation in such a way that the values you enter become the initial values and the animation proceeds to the values in your css/html.

 

 

Thanks for suggestion, I use GSAP 2, so could you please help me with my codepen that refers to:

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/DrawSVGPlugin.js

 

 

1 hour ago, mikel said:

Hey @crealiagroup,

 

Welcome to the GreenSock Forum.

 

You could use GSAP drawSVG and then stagger the elements of the SVG.

 

Thanks for suggestion, I use GSAP 2, so could you please help me with my codepen that refers to:

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/DrawSVGPlugin.js

 

Link to post
Share on other sites

Sorry, I boarded the GSAP ship after version 3. 

Judging by the response in the forums, it seems a switch to it is strongly suggested, especially so if you are looking for pointers and code samples, since it doesn't make much sense to actively support so old version.

  • Like 4
Link to post
Share on other sites
2 hours ago, tailbreezy said:

Sorry, I boarded the GSAP ship after version 3. 

Judging by the response in the forums, it seems a switch to it is strongly suggested, especially so if you are looking for pointers and code samples, since it doesn't make much sense to actively support so old version.

Thanks for reply. I'm working on an old project that uses GSAP 2 in it's core, that's why I need to adapt for it. Thanks anyway :)

Link to post
Share on other sites

Upgrading to GSAP 3 is easy! Most of your code should be compatible with GSAP 3 right away (without switching the syntax). We highly recommend migrating projects to GSAP 3.

  • Like 2
Link to post
Share on other sites
1 hour ago, ZachSaucier said:

Upgrading to GSAP 3 is easy! Most of your code should be compatible with GSAP 3 right away (without switching the syntax). We highly recommend migrating projects to GSAP 3.

Ok, thanks for suggestion.

In the meanwhile, is it possible to find a solution for GSAP 2 ?

Link to post
Share on other sites

Hey @crealiagroup,

 

Yes, it is. Use the GSAP 3 Migration Guide backwards for the above GSP 3.0 solutions.

And in the DOCs you could change to version 2.x for GSAP drawSVG.

 

Happy tweening ...

Mikel

 

  • Like 1
Link to post
Share on other sites
43 minutes ago, mikel said:

Yes, it is. Use the GSAP 3 Migration Guide backwards for the above GSP 3.0 solutions.

And in the DOCs you could change to version 2.x for GSAP drawSVG.

Ok thanks, I've tried to update my codepen according to your suggestion but I cannot let it work as expected. Any suggestion about what I'm wrong?

Thanks so much in advance.

Link to post
Share on other sites
2 minutes ago, PointC said:

Load the GSAP3 files and you should be good to go.

Thanks but as mentioned before I need to do it for GSAP2 in the meanwhile we upgrade to GSAP3.

Link to post
Share on other sites
54 minutes ago, PointC said:

Sorry. I misunderstood. I thought you were trying to upgrade it. Here's a GSAP2 version.

 

Happy tweening.

:)

 

Really appreciated! Thanks so much for your suggestion! Happy tweening you too :)

Link to post
Share on other sites

Thanks to everybody for you time helping me solving this task and made me discover more about GSAP!

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

×