Help with buttons on Webflow

Design help Animations & Interactions
#1

Hello!

I have to know if any code is implemented here or it’s only design with interactions.
See this video:

(I uploaded it on my of my websites just for you guys to see)

It is taken from https://www.finsweet.com/

How did they make the numbers add on on Ajax like it’s a calculator?
I mean, I see how did they make everything else with Lottie and radio buttons.

But how do the numbers add? Can you do that in Webflow and without any code integrations?

I want to create it for my own website as well.

Thank you - I appreciate your time to answer

Ron

#2

You should reach out to Joe (@Finsweet) here on the forum, he’s fairly active and I’m sure he’d have no problem answering any questions you have about the site.

#3

@Ron_Deutch

The video isn’t loading for me, but I’m guessing your referring to this:

image
image465×842 82.1 KB

It looks like they are using js to change the values: https://files.finsweet.com/finsweet19/ynw-estimation.js

It’s not super complicated to do with js, granted their implementation looks a bit different than I would have expected. Essentially they have form elements that on click are checking for other selected elements and creating a total and then adjusting the pricing and text in the calculator accordingly. As @mikeyevin said I’m sure Joe can provide more detail.

I don’t think you can do this without a developer though.

1 Like
#4

Hey @Ron_Deutch - Welcome to the community!!

Yes, there is a lot of custom code on our site! We built the pricing section in Webflow Interactions and then rebuilt is using Anime js library for performance. Most of what you see on our site can be built with Interactions!

As for the pricing calc - yes, this is built with javascript. It’s also hooked up to Webflow CMS! It even passes values to the contact form! Really custom all around. You’ll need a js dev to help with a calculator like this - but it’s not difficult for most js devs.