[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?
Hi everybody!
I am currently learning how to animate some svg elements with css and keyframes.
So I'm trying to recreate the animation here: https://youtu.be/vqXLGX0szIQ?si=u0uawtQtUnxRmI7-&t=10737
I've remade the svg used on the exercise, using Affinity Designer (I'm saying this because, maybe it's what causes my issue, I don't know).
And so following instructions I've coded this: https://codepen.io/valerio-fluo/pen/zxYOKxj
The code of my svg is a bit long so I will give you the key lines:
• in the HTML part:
► line 61: is the path of my dotted-line I would like to animate
• in CSS part:
► line 251: is the styling of my dotted-line element
► line 260: is my "dash" animation
My issue is that, with my code, unlike in the video, my dots seem to reduce de space between them in my animation, which is weird regarding the "dash-array" property I've set.
When I play with dash-array values, it seem that in fact there is some dots that go to the left meanwhile others to the right.
I don't understand why it does that.
I guess it's because of the path of my dotted-line, since the svg is the only thing that differs from the code used in that video, but I have no idea of how to edit this in the good way.
Could a good soul please, explain this to me, and how to fix it? That would be much appreciated.
Envato Tuts+
YouTube
Motion Design for the Web | FREE COURSE
In this motion design tutorial, you‘ll learn how to include motion in your web design projects using video, CSS, JavaScript, GSAP, SVG, Lottie, and more. This course will help you bring your websites to life. ► Download unlimited photos, fonts & templates with Envato: https://elements.envato.com/?utm_campaign=yt_tutsplus_vqXLGX0szIQ&utm_medium=r...
9 Replies
you have about 1000 lines of css and html
can you reduce it to the bare minimum to reproduce your problem?
i found the element, it was a pain
the documentation on this is pretty bad, not gonna lie:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
if i were you, here's what i would do instead:
- increase the size of the path, so it is slightly inside the plane and the train icons
- rotate clock-wise just the same amount as an offset and a dash
- reset
Yes sorry, that's why I had written the line number of the element ^^
Yes I've already read this but maybe I'm missing something (English isn't my mother tongue) but when I translate this in french, it says that stroke-dashoffset is shifting the dot from its initial position.
So I'm wandering why is it doing this in two different ways in my case?
thank you very much for this solution.
But how would you do all that?
Using transform property in CSS?
yes, using transform
from my understanding of the terrible documentation and from trying it, it just changes the space between the dashes
So I've been playing with the svg and it appears that, this not the space between the dashes that changes, in fact, it's like it considers my path not as a line, but as a shape with "up stroke" and "bottom stroke".
So what we see, that looks like a changing of space between dashes is in fact "up stroke" and "bottom stroke" that are exactly on the same y axes level, "up stroke" going to the right and "bottom stroke" going to the left, simultaneously, as they are on the same level we got the impression that dashes are just decreasing and increasing their space between but it's not.
So my question is (it's the last I promess 😅 ): please how could I modify this "dotted-line" element, to be made of just one stroke like the one on the video, not an up one and bottom one?
PS: I have modified my codepen, so you can see what I'm talking about
here is the lightened codepen: https://codepen.io/valerio-fluo/full/ogNvapz
Your dotted line currently goes from left to right and then back again.
You can just modify your path so that it only goes from one side to the other.
This seems to be what you need:
you're right, in the preview it shows the line going both ways
that should solve it
Yes that works ! Thank you!
So just to be sure, was the problem in the fact that my path was discribing the outline of my curve in the first place?
So everytime I design a curve with affinity design I will have to cut half the path in the svg's code?
thank you both for your help!
The amount that you need to "cut" will depend on the path itself. You can use trial and error to remove parts of the path until you get what you need.