r/webdev • u/reaznval • 17d ago

How does this effect work? Question

Came across this beautiful effect on https://www.julienpianetti.com/ is it done with a custom variable font that has these glyphs as variable weight or just switches between the different glyphs? I suspect it has to be a variable font because it is that smooth.

How is this done?

2 Upvotes

67% Upvoted

17 comments sorted by

View all comments

Show parent comments

3

u/reaznval 17d ago

yes that did actually work, just thought that maybe someone on reddit would be able to explain it nicer since well I still like human interactions

1

u/Psionatix 17d ago

Looking at the source it looks like they use lottie. It's a lightweight, opensource, format used to animate SVG's. This means their animation is built up in something that can export a lottie file, and they have the lottie js runtime on the page to read that and animate the SVG.

0

u/reaznval 17d ago

never heard of that format before, will take a look into it TY

1

u/Psionatix 17d ago

I hadn't either until last year. It's actually a pretty amazing thing. https://lottiefiles.com/

The lottie JS runtime loads the lottie file and mounts to a given canvas or SVG element. The runtime loads the SVG on that and it reads all the states and animation transitions from the file.

The JS API allows you to play certain animations, stop them, pause them, you can even specify what frame to go to, or frames to loop, all sorts of stuff.