I’m trying to create a animated SVG drawing where the cursive handwriting text appears to be drawing itself on screen.

I have tried countless times over the last 2+ years with varying degrees of success. Sometimes I manage to get a letter or two to animate and other times, such as in this case, some of the letters are ‘hidden’ while others are still visible. I’ve read dozens of articles and watched several videos but I’m lost and completely frustrated. The videos I’ve watched use versions of software, such as Adobe Animate, that are completely outdated or they provide information to create animations that are similar but not exactly the same as to what I’m doing. When I try to follow along there comes a point where I get stuck and can’t proceed forward. The same is true for the articles. Each author has a different approach to solving the same problem of animating the SVG text. So when I try to follow along and get stuck I attempt to determine what the issue is by reading a different article hoping it will solve the problem but because each article uses a different technique I have basically start all over.

I’m DEEPLY DEEPLY frustrated. This is what I’m trying to accomplish and what my test example is based upon: https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/

This is a link to my modified “test” version of the code example above where I’ve been tinkering with the code trying to determine how it works so I can then take this knowledge and apply it to my own design: Minified Working SVG Drawing (codepen.io)

The final design that I need to animate:

r/web_design - How to Create Animated Hand Drawing SVG

Link to Illustrator file: https://www.dropbox.com/s/q8rd8rqc3fc3f08/Ending%20Hunger.ai?dl=0

It’s been at least a month since I last worked on it. I had to take a break because I was loosing my mind so FYI, the code is a little messy since I was trying different things to solve the issue with no success. My apologies in advance for this.

These are some of the articles I’ve been reading for reference but there are sooo soooooooo many more I honestly don’t remember all of them. I’d get frustrated and just delete everything and just completely start over again once I felt like it:

https://medium.com/@aniboaz/animate-svg-4fa7dd00e860

https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/

https://lenadesign.org/2020/05/31/svg-handwriting-animation/

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

https://medium.com/@anatacreative/handwriting-animation-with-svg-638931410cfa

https://stackoverflow.com/questions/37779906/how-to-animate-handwriting-text-on-the-web-page-using-svg

https://greensock.com/forums/topic/24812-handwriting-effect-with-drawsvg/

https://medium.theuxblog.com/the-ultimate-guide-to-animating-drawn-text-in-html-with-css-no-jquery-needed-bcdcfdb963d8

https://graphicdesign.stackexchange.com/questions/94195/how-to-create-an-svg-path-reveal-animation-in-illustrator

https://www.thecodedose.com/blog/animated-handwriting-effect-with-css

For context, I’m using Adobe Illustrator v25.2. I don’t have much experience with Illustrator so the problem could literally be anywhere along the development line ranging from the way the text itself was generated using Illustrator (ie the way the layers are arranged and the pathing tool) to a bug in the code.

My goal is to create the animated SVG using pure CSS (and JavaScript if only necessary) but more importantly I want to understand the fundamentals of what I’m doing wrong so that I can create various other animations like this in the future. Any help would be DEEEEEEEEEEEEEEEPLY appreciated. You have no freaking clue what a relief it would be to FINALLY have this put to rest. PLEASE HELP!!! Thank you 🙂



Source link

Write A Comment