Nice : but if you prefer a 100% nocode you can use a lottie and an a “while scrolling into view” effect on webflow and target the lottie to 0% a the beguining and 100% at the end.
@Romuald_Jay IMO is more efficient use a few bytes of code than make a request to upload giant animated lottie for simple thing like this. It is same idea I saw here where “no-code dev” has Hero section as 2mb image instead using HTML and CSS.
Romauld, that’s a very nifty feature. I had not realized that when you target a Lottie, you have the ability to control its time dimension as a playback % position too. Slick!
Updating my demo with 3 variations.
The JS + Lottie variant was my favorite, because of the ability to synch the playback frame, but now that’s only useful if I want to display something else like % complete or read time remaining.
Otherwise, Lottie + Interaction is super slick.
@Stan Totally agree on size, but for this, the lotties are miniscule. It’s one of the few places I’ve found where Lotties really make sense as the right tech for the job.
UPDATE: @Chad_Ostergren the cloneable is updated, and Romauld’s approach really works well, especially if you can find/create the right lottie for your indicator.
A we both know there is many ways how to achieve identical result and if you choose lottie instead SVG that’s your way to animate progress bar but I’m still convinced that lottie have different purpose to be used for.
