Search the Community
Showing results for tags 'strokedashoffset'.
Found 2 results
SVG Dotted Stroke Animation
shunyadezain posted a topic in GSAPHi guys! I'm trying to make a simple weather app on Codepen and I have a hard time to make one animation with dotted strokes. I want to make these strokes to move like rain drops. I tried drawSVG first but, I found an article about a line animation using stroke-dashoffset on CSS Tricks and it kind of works. There are still dots on the sides and look not good... Here is the article: https://css-tricks.com/svg-line-animation-works/ Is there any solution for this? Thank you
Draw SVG Problem: Notch in stroke at corner of path.
pathstudio posted a topic in GSAPHello and thanks in advance to anyone who helps. I have a simple logo that I'm using DrawSVG on. I started using CSS only using stroke-dashoffset and stroke-dasharray Then I forked the DrawSVG CodePen to try that and added in my logo (see codepen link, look really closely to see the notches in the line on the codepen and reference my attached image). Both CSS only method and DrawSVG use stroke-dashoffset and stroke-dasharray to animate the line drawing effect. Notches problem: I believe it is stroke-dasharray that causes the notches in my path outline. (See attached image for notches). Once stroke-dasharray is at 0 the notches go away. I've also tried to save the svg with paths grouped in various ways out of adobe illustrator. I'm brand new to SVG's and animating them. Fingers crossed that someone has a fix for me.