Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How exactly does the animation work? #5

Open
TheGreenAirplane opened this issue Sep 20, 2023 · 0 comments
Open

How exactly does the animation work? #5

TheGreenAirplane opened this issue Sep 20, 2023 · 0 comments

Comments

@TheGreenAirplane
Copy link

Hi, first of all, thank you for making this thing. It's amazing.
I don't have an issue, I would just like to ask a few questions about the implementation. I'm trying to modify it, I want to fully understand it first. I hope that's ok.
I'm completely new to SVG, as will become apparent from my questions.

  1. Why do all the paths except from the first one have two animate elements?
<animate attributeName="stroke-dashoffset" values="17.501" fill="freeze" begin="6f22.click"/>
<animate attributeName="stroke-dashoffset" values="17.501;17.501;0" keyTimes="0;0.874;1" dur="1.391s" fill="freeze" begin="0s;6f22.click"/>

I understand what the second animate does, but what about the first one? Why do you explicitly skip it on the first path? I tried removing all of them from all the paths of the generated SVG file, and it seemed to behave in the exact same way. So what are they for?

  1. Why did you do the stroke timing through keyTimes?
    <animate attributeName="stroke-dashoffset" values="17.501;17.501;0" keyTimes="0;0.874;1" dur="1.391s" fill="freeze" begin="0s;6f22.click"/>
    It took me a while to figure it out, but from what I understand, all the strokes are set up to start animating at 0 seconds, but the keyTimes are set so that they do nothing, animating the stroke-dashoffset from stroke length to stroke length until all the previous paths have finished animating. Why did you choose this approach? Couldn't you have just set the beginning time of each path to the end time of the previous one?

  2. This one's a bit of a mystery to me. I tried to slow down the animation by adding a coefficient to the stroke duration calculation:

 < 15d => pathLength * speedCoeficient / 50d,
			< 60d => pathLength * speedCoeficient / 100d,
			_ => pathLength * speedCoeficient / 133

It works nicely, except when I slowing the animation way down (10x slower), I noticed that the first stroke doesn't start animating until about halfway through its defined duration.
<animate attributeName="stroke-dashoffset" values="62.489;62.489;0" dur="6.108s" fill="freeze" begin="0s;5922.click" />
The first path doesn't have any keyTimes. So what exactly is delaying the animation?

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant