teknolyfe Posted February 9 Share Posted February 9 (edited) Hi all- Hoping everyone can help me out. I'm trying to mimic the same animation concept of trim path/offset in After Effects using DrawSVG. The basic "chase" concept seems to be fine in the Codepen example, but I need to get the offset working where the path continues to flow as if the line was continuing. Any ideas? Attached MP4 from After Effects of the idea. TEST 2_1.mp4 See the Pen qBvJBML by teknolyfe (@teknolyfe) on CodePen Edited February 9 by teknolyfe Added example file Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 9 Share Posted February 9 Hi @teknolyfe welcome to the forum! I would have a tween that runs initially, that then called another tween when it is done and repeats infinitely. In your initial demo nothing was visible, so I used my own shape to get things up and running. The timing could be better for the initial load, but that is easy to tweak. Hope it helps and happy tweening! See the Pen OJqBPVb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
teknolyfe Posted February 11 Author Share Posted February 11 Thanks mvaneijgen, But not sure how that's similar to what I'm looking for. Did you watch the MP4 vid I attached soon after? Even from an example of a straight line, it would be like drawing 50% of it, and then somehow moving that drawn portion to the right along the same path essentially. Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 11 Share Posted February 11 Then I'm unsure what the question is. To me you want to animate the stroke-dashoffset of an SVG shape. In the video you shared I see a path being drawn from nothing (eg 0%) and then keep going in the same direction at a steady length, in my demo 10% of the overal length of the path. Maybe you can describe what you want and what it is doing right now using the following format A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" 🤷 Link to comment Share on other sites More sharing options...
teknolyfe Posted February 11 Author Share Posted February 11 I got it figured out, was just over complicating it in my head at first. It's actually pretty simple, just all timing. See the Pen XWGxzJM by teknolyfe (@teknolyfe) on CodePen 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