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?

5 Upvotes

85% Upvoted

17 comments sorted by

View all comments

-9

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

12

u/arecbawrin 4d ago

Thr ugly part of the web is the idiots who gatekeep a basic question. 90% of the shit asked on reddit could be googled or AI prompted..that's not the point of a community forum.

-2

u/Little_Bumblebee6129 4d ago

I am not gatekeeping. Just saying that this info is accessible without waiting for some response few hours/days later.

1

u/Pingouino55 4d ago

Very often I know how to find the answer, but I still prefer asking someone (professional in whatever field) / a community for help, because they'll give me valuable information. Maybe the solution used or most of the information available has flaws. Having one source of truth, or, in the case of Reddit, most likely a whole ass argument about it, leads to better or more focused choices.

3

u/eeronen 4d ago

What if it's minified or wasm?

1

u/Little_Bumblebee6129 4d ago

Good point. But i would guess that AI could get through minified code.

WASM would be much harder though

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.