Jump to content
Search Community

GSAP 2 Draw svg icon on mouse hover

crealiagroup test
Moderator Tag

Go to solution Solved by PointC,

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