how to animate those self drawing path following animations?
I actually just want to do a handwriting reveal thing
and I want different paths to be followed at different speeds and easing also maybe
I dont think this can be done with figmotion(using vector path feature)
using that doesnt really have a path following animation it gives a very weird result
I cant run after effects in my potato pc so that's not an option
12 Replies
Vivus Instant - inline SVG animation with CSS
Inline SVG Drawing Animation
I'll be sure to check it out tmrw
thanks a lot
I just checked it actually
and no this is not what I am looking for but it's close
for example I want to animate a t
to do that I obviously need to emulate the writing of a
first you draw the vertical line
and then the horizontal one
but in this app I cant seem to add a delay for when the vertical line finishes drawing therefore they both start at the same time
https://www.svgator.com/ it's a paid software, but I think their free plan for a 3 or something svgs
SVGator: Free SVG Animation Creator Online - No Coding
It's SVG animation made easy - Create impressive SVG animations online, without any coding skills. Add them easily to your website. Get started for free!
You know so many tools 😂
Couldn't you just use the stroke-dashArray and dash offset to create an animation with keyframes
I was looking for a solution with milliseconds keyframes because I want quite alotta complex animations
and doing all those complex calculations in percentages seems hard and I want a better solution
well obviously it's not that complex but I just want something like adobe after effects on the web
if a solution like that exists that would help me in my other animations too
but if not I'll do it with stroke-dasharray and offset
I just didnt wanna write css code for this animation cos there's gonna be quite a few of them
an amazing website yes but their stroke offset animation is a premium feature and rightfully so
Medium
Two super-CSS animation properties for line SVGs: stroke-dasharray ...
Try these animation codes in your HTML and CSS
I've found this medium article that's basically what I am looking for in a solution with stroke-dasharray
This one has 7-day full features trial https://spiritapp.io/
Spirit - Interactive Animation Tool
Spirit is an animation toolkit built to help you create animations for the web directly in the browser
how tf do you know so many apps 💀
bro knows the whole internet
you got a blog or smth I gotta follow you bruh
I think I've learned enough
I'll close this channel now