Xristi Posted March 16 Share Posted March 16 (edited) My code pen uses two different functions to separately animate a line and the arrowhead that travels along the line's path at the head of the lengthening line. I used a timeline to try to synchronize their movement, keeping the arrowhead at the head of the animating line moving towards its target. Quite unsatisfactory even with no eases. This can't be much of a problem, but in all my searching I can only find objects moving along a static path. Spent a lot of time on this (of course I learned a lot, too); if anyone can help I'd be most grateful. See the Pen yLrVzYW by storyproblemdoctor (@storyproblemdoctor) on CodePen Edited March 16 by Xristi I fixed it! Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 17 Share Posted March 17 You'd stated you've fixed it? I still wanted to share some insight on how I would set this up. I've two pens for you, one with some comments in your JS of things that aren't quite right: See the Pen BaEQrBe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen And one with a timeline and two tweens. I've modified your SVG, because there were some transforms on shapes. When animating SVG I always like to flatten all transforms (this should be an option in your design program). Hope it helps and happy tweening! See the Pen LYvbzae?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Xristi Posted March 17 Author Share Posted March 17 This is wonderful!! Thank you so much. I am so grateful that you decided to post a reply even after my "fixed" edit. I meant that I thought I had fixed my code to run even though I didn't like the result ; wrong. It didn't run but I thought someone might still look at the code and you did! I not only learned exactly what I need to know with regards to this important animation in my ITS, but learned a lot about posting a pen. Such a thorough response - you are to commended as well as thanked... Xristi 1 Link to comment Share on other sites More sharing options...
Xristi Posted March 17 Author Share Posted March 17 I'm sorry... more learning to be done. What is the name of the program you used to generate the SVG for the triangle? Thank you! Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 17 Share Posted March 17 I've used https://boxy-svg.com/app to quickly laysomething out. Are you having issues with your shapes? I always make sure to 'flatten transforms' when exporting SVG from my vector program. In Boxy SVG this is located in the "shape" panel under transform "Reorient". Hope it helps and happy tweening! Link to comment Share on other sites More sharing options...
Xristi Posted March 17 Author Share Posted March 17 Thank you for your quick reply. As I get better at animating SVGs with GSAP I'll use more shapes. Right now, I only use the triangle described by a path (written by me). Sure would like to use Boxy and, in fact, I just downloaded it. I used Inkscape for a little experimentation and it had a selection in Edit that gave a path for the object just drawn. Does Boxy have that? You used the word "export"; What is exported? Thank you for teaching me stuff! Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 17 Share Posted March 17 Check out this tutorial by our on @Carl, I use Affinity Designer and with it I can to to File > Export and select SVG. With Boxy you can just copy the SVG code which is much easier when developing animation. Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
Xristi Posted March 18 Author Share Posted March 18 Hi, not sure you can help me with my new barrier to success because you solved the problem that I posted. The animation runs perfectly on the page I submitted for the codepen. However, when I ported the code to the actual page for its intended use, it did not show when its function was called. So I fiddled around with the css and html code. The changes I have made either kept the svg from appearing or, when it did appear it was preceded by the completed svg appearing, then the animation. Is there something I am doing wrong that rings a bell, or should I repost? Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 18 Share Posted March 18 When this happens to me. I just start disabling big chunks of CSS/HTML or other JS until the bug has been fixed and then start introducing small elements back until it is back again. Then you know what the culprit is. But other than that I don't know 🤷 Link to comment Share on other sites More sharing options...
Xristi Posted March 18 Author Share Posted March 18 OK. Somewhat comforting to know that things like this happen to people as talented and accomplished as you Thank you for all your help, Xristi 1 Link to comment Share on other sites More sharing options...
Xristi Posted March 31 Author Share Posted March 31 Thank you mvanelgjen. I'm doing very well with my animated arrows thanks to you and GSAP!!! Most appreciated. 1 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