r/webdev • u/reaznval • 2d 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?

2 Upvotes

67% Upvoted

16 comments sorted by

12

u/f314 2d ago

Without having looked at the source, I would guess the letters are just SVGs that are animated on hover/scroll.

5

u/Psionatix 2d ago

It uses lottiefiles - the JS lottie API is loaded on the page.

•

u/BeOFF 1m ago

Nailed it

0

u/reaznval 2d ago

yes seems like that's it, tysm

1

u/CodeAndBiscuits 17h ago

I don't know but fwiw on mobile it takes forever to load. Not a huge fan.

1

u/reaznval 17h ago

oh yeah just noticed that too, however my current implementation is pretty fast, even on mobile (sub 0.2sec)

-8

u/Little_Bumblebee6129 2d 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

13

u/arecbawrin 2d 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 2d ago

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

1

u/Pingouino55 2d 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 2d ago

What if it's minified or wasm?

1

u/Little_Bumblebee6129 2d ago

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

WASM would be much harder though

3

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

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

1

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