NickNo Posted June 9, 2020 Share Posted June 9, 2020 I did this as a quick mockup using svgator, and now need to incorporate a few objects which have these moving dashed lines into a gsap project - (first project so please bear with :)) Is this possible to do in gsap (the moving dashed line) - and can someone please point me in the right direction...? See the Pen gOPavjW by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
NickNo Posted June 9, 2020 Author Share Posted June 9, 2020 Luckily started reading the svg gotchas thread and found this: https://greensock.com/forums/topic/13681-svg-gotchas/?do=findComment&comment=57942 hopefully can make something like this work... Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 Hey Nick and welcome to the GreenSock forums! That animation is quite trivial with GSAP as it's just animating the stroke-dashoffset attribute. Check it out: See the Pen MWKaRqv?editors=0010 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
NickNo Posted June 9, 2020 Author Share Posted June 9, 2020 That’s awesome thanks Zach! Amazing how hard it is to find something when you don’t quite know what to search for :) ... this forum looks to be super helpful and responsive! Thanks again 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 Indeed. Thanks for posting a minimal demo! Link to comment Share on other sites More sharing options...
NickNo Posted June 9, 2020 Author Share Posted June 9, 2020 Just as an aside... I bought this into svgator with the water as solid (undashed) lines, which the tool has obviously converted into lots of ellipse paths... is there any way or advantage of doing this in GSAP? Ie animating a solid path into dashes rather than animating lots of paths of existing dashes? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 Sorry, I am not understanding your question. Can you please try to rephrase? Maybe show an example of both ways that you're talking about? Link to comment Share on other sites More sharing options...
NickNo Posted June 10, 2020 Author Share Posted June 10, 2020 OK, I don't blame you for not understanding - it wasn't very clear, and in fact I was just confusing myself by not reading the code properly So, just to tidy up without the rest of the guff, and just focus on the line, this is the exact answer you gave and what I needed See the Pen LYGGXJx by nickjacobsnz (@nickjacobsnz) on CodePen 1 Link to comment Share on other sites More sharing options...
NickNo Posted June 12, 2020 Author Share Posted June 12, 2020 OK, I do have one more question on animating lines So, I've found that some of the animation is moving the wrong way when I animate the strokeDashOffset - is there any easy way to fix this other than going back and redrawing in illustrator, or doing something like I've done here - a separate .reversed animation: See the Pen oNbxoGx by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
NickNo Posted June 12, 2020 Author Share Posted June 12, 2020 I feel like I'm contributing when I answer my own questions haha. I did find this tip from @PointC which was a quick Illustrator fix without having to code 2 sets of line animations: "Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export." 4 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