I am hoping to add an interaction onto my website similar to what Tech Crunch does here:
Nuwa Pen launches with misleading Kickstarter campaign | TechCrunch
(Top Right Component on Tech Crunch): Interaction / Component: Sticky Progress Bar on Scroll Page that is a circle and also close / check button.
Has anyone come across how to replicate this interaction? I saw one video that Ben Parker did (great job, Ben!), but it isn’t completely clean.
Would anyone be able to help or point me in the right direction?
Here is my public share link:
( how to access public share link)
May 27, 2023, 8:57am
Hey that’s pretty cool, so I decided to give it a crack.
It worked pretty well.
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.
May 28, 2023, 11:06am
@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.
Webflow Community is awesome. I"ll take look at all of these options. Thank you all.
May 30, 2023, 2:03am
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.
@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.
May 30, 2023, 7:37am
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.