drawsvg Complex Timeline DrawSVG Question

[esdata]

I don't have a working example, as I just NPMd 3.0 and grabbed the 149/year club a couple hours ago. 

 

I'm used to framer / motion.react.

 

I'm looking for... A rubber duck. Attached is a simple Google searched SVG pitch fork.  The best way I can describe my drawing is: flip this 180 and attach another fork on each end. 

 

Ok, so.

 

I'm a developer, and i would rather start off the right way vs trial and error. Abstraction is my thing. I wish there was a visual editor, but I can f5 my way to success in NextJS.

 

For the project: think 100 lines, 8k pixels height easy.

 

I'm only using lines, and here are my immediate questions--

 

Where should I break the lines on the fork? (Handle, edge, 4 prongs? 1 center line and start the prongs when they hit?).

 

Do you need to mask?

 

How would I start the animations of each prong at the same time when the handle is finished?

 

How do I get a consistent draw speed/flow in varying length lines?

 

I'm not drawing a maze, but that's another way to think about it. 

 

I'm interested in the approach more than a codepen, but I wouldn't say no to one.  Like.. fromTo vs to and all this new stuff.

 

 

Edited November 30, 2024 by esdata
Spelling, clarification

[mvaneijgen]

Hi @esdata welcome to the forum and thanks for being a club member 🎉

 

Yes ,these are all questions you'll have to answer to find a solution that fits your project. We can't really answer that for you, because we probably never build this exact project you're building. My advice, don't npm install, but do open up a Codepen and start experimenting, this way you can test out certain ideas and see what sticks and because it is just HTML, CSS and JS you don't have to worry about your framework being in the way and when you're done you only have to port it over, but this will be easy because you have a simple working version. Or if you're lost you have a version you can share on places like this to ask for feedback. 

 

My initial idea would be to split it at the handle and have two mirror images from each other go left and right and then the middle. To make it finish at the same time you just need to make sure they have the same duration and drawing the shape from 0% to 100% with lets say 1 second duration, will make sure they all grow at the same rate and finish at the same time.

 

For a project of my I need to have a dashed line come in from the left of the page, go down to the text (following the length of the text) and then going to the right off the page. I did this by creating the basic shape I needed in my vector program and then inspecting the path in my code editor. I'd used whole numbers, so it would be easier to figure out what was what, SVGs are complex, but if you know what you're looking for and determined enough you'll be able to figure out what values do what. Then it was a question of changing the values I had figured out to update their values dynamically. I really like this site for inspecting SVGs paths https://yqnn.github.io/svg-path-editor/ you can easily update values and see the whole structure of the SVG path.

 

Another thing I would think would be smart is working either vertically or horizontally, instead of the handle the fork has in your preview and then just in the and rotate the whole group by 45deg. If you start with all the logic at 45deg all the math will be a lot harder I would feel. 

 

Hope it helps and happy tweening! 

 

See the Pen dyBbpKE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.