Ah, yes. I believe that's still the case. I haven't ever found a solution for this. I'm assuming there are some libraries or something that can work cross-browser, but negative stroke-dashoffset do not work properly in Safari. If I remember correctly, they claim to be implementing the speck correctly, but it's still frustrating to have different experiences.
Just in case it helps anyone else: In some cases you can use the pathLength attribute on any element in order to use less abstract numbers for your path animations. E.g. And then you can think of your CSS animation properties in terms of 0-100٪ Alternatively, you could use 360 for circles in order to animate using ° degrees
i'm just getting into working with svg's making myself some logos, i am using the circle a lot, and was earlier thinking about how to cut the top off without using line or bezier curve, trying to animate a rotation is hard enough, this will help, thanks
Hello! I have a question regarding first seconds of the video, where you showed your js timer project. Before the timer began to count your circle had black stroke, after the timer started the stroke became red and started to decrease its length, but the black stroke remained. How did you do this??? Did you draw addition circles?
This might be a dumb question but I'm gonna ask it anyway. What would happen if set the animation duration(in this case animation-duration: 10s) of stroke dash offset as much the time we want it to animate, wouldn't that cut down some JS?
Not a dumb question. Yes! That would work; but it would not allow you to make it look like ticking seconds. It would just move in one motion around in 10 seconds. So just up to you what you prefer.
If someone is having problems in Safari: at the moment Safari doesn't accept negative values for stroke-dashoffset.
Thanks for the nice tutorial!
Ah, yes. I believe that's still the case. I haven't ever found a solution for this. I'm assuming there are some libraries or something that can work cross-browser, but negative stroke-dashoffset do not work properly in Safari. If I remember correctly, they claim to be implementing the speck correctly, but it's still frustrating to have different experiences.
Just in case it helps anyone else:
In some cases you can use the pathLength attribute on any element in order to use less abstract numbers for your path animations.
E.g.
And then you can think of your CSS animation properties in terms of 0-100٪
Alternatively, you could use 360 for circles in order to animate using ° degrees
i'm just getting into working with svg's making myself some logos, i am using the circle a lot, and was earlier thinking about how to cut the top off without using line or bezier curve, trying to animate a rotation is hard enough, this will help, thanks
Hello! I have a question regarding first seconds of the video, where you showed your js timer project. Before the timer began to count your circle had black stroke, after the timer started the stroke became red and started to decrease its length, but the black stroke remained. How did you do this??? Did you draw addition circles?
Great tutorial!
Gal you enjoyed it!
So happy to see this video, I'm participating in the same challenge and was exactly stuck at animating the svg. Thanks for the tut
This might be a dumb question but I'm gonna ask it anyway. What would happen if set the animation duration(in this case animation-duration: 10s) of stroke dash offset as much the time we want it to animate, wouldn't that cut down some JS?
Not a dumb question. Yes! That would work; but it would not allow you to make it look like ticking seconds. It would just move in one motion around in 10 seconds. So just up to you what you prefer.
@@CodinginPublic ah, yes that is true. Ticking part of the animation looks much cooler
So clear, thanks lot 😊
You're welcome 😊
Thanks you're awesome not even the ia can tell me how this exactly work in a way that I could understand god bless you man
💪 take that, Artificial Intelligence! lol
Really love this video
Great! Thanks for saying something!
THANK YOU FOR THIS VIDEO!
🙏 you’re welcome!
Great video. I didn't know the $0 trick to get the total length of the circle.
Thanks! Yeah! It’s a useful little trick for interacting with things in the DOM from the browser console.
Great video!
Glad you enjoyed it!