Share Posted February 16, 2021 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 More sharing options...
Share Posted February 16, 2021 Hey @crealiagroup, Welcome to the GreenSock Forum. You could use GSAP drawSVG and then stagger the elements of the SVG. See the Pen GRNWzZL by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
Share Posted February 16, 2021 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 4 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 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 More sharing options...
Share Posted February 16, 2021 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 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 More sharing options...
Share Posted February 16, 2021 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 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 comment Share on other sites More sharing options...
Share Posted February 16, 2021 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 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 More sharing options...
Share Posted February 16, 2021 Load the GSAP3 files and you should be good to go. See the Pen 86eb5cc92e9b1ec654fea525c1fd91fe by PointC (@PointC) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 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 comment Share on other sites More sharing options...
Solution Solution Share Posted February 16, 2021 Sorry. I misunderstood. I thought you were trying to upgrade it. Here's a GSAP2 version. See the Pen ff6cb57d4712c7b6d939b348b653f982 by PointC (@PointC) on CodePen Happy tweening. 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 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 comment Share on other sites More sharing options...
Author Share Posted February 16, 2021 Thanks to everybody for you time helping me solving this task and made me discover more about GSAP! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now