Back to home

Cool animation I found

Susan Lau - February 2023

I'm sure the talk Susan Lau gave was very interesting and useful. Sadly, the room was quite cramped and Susan did not have a microphone so I could only make out a few words about SQL and databases and stuff like that. So rather than writing my report on Susan Lau's talk here, take a look at this neat way to animate text using svg and css

Susan

I found this animation on Tympanus, along with some other cool ones. This one caught my eye the most though. It uses the stroke-dasharray and stroke-dashoffset properties to create the animation. The stroke-dasharray property specifies the length of the dashes and the gaps between them. The stroke-dashoffset property specifies the distance between the start of the dash and the start of the path. By animating the stroke-dashoffset property, we can make it look like the dashes are moving along the path.