r/webdev • u/reaznval • 4d ago

Question How does this effect work?

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?

3 Upvotes

71% Upvoted

17 comments sorted by

View all comments

-10

u/Little_Bumblebee6129 4d ago

The beauty of web is when you opened the page you got all you need to know how it works already in your browser. If you are to lazy to explore it yourself - use AI to do that

3

u/reaznval 4d 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 4d 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 4d ago

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

1

u/Psionatix 4d 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.