Discover the best customjavascript websites created by professional designers. Get inspired and start planning your perfect customjavascript web design today!

Ronopixels

Explore the world of 2D shape interactions through a captivating journey powered by Matter.js, a powerful physics engine for JavaScript.

2D Shape Interaction Using Matter JS

Manish Pandey

Hello 👋

this link animation is inspired by rubenwyttenbach.ch and made using CSS, JavsScript, and SpilitText.js

Click on Say hello 👋 to request more. Follow for more clonable.

Link animation using CSS and JavaScript with Sound on hover

Davi Grah

Welcome to my personal portfolio website! Explore the various sections and immerse yourself in the captivating world of 3D animations I've meticulously crafted. Feel free to navigate through the content and discover the unique blend of creativity and technology that I've brought to life.

Looking to make your online vision a reality? Reach out to me today, and together, we can transform your web project into a digital masterpiece.

Webflow Developer Portfolio 3D Spline

Oleksander's Workspace

Portfolio website for a Belarusian architect, interior & industrial designer, Sasha Hamolin.


Website by

Design — Yana Lue (yalu.dsgn@gmail.com) 
Art-Direction — Kate Distry (sinyazh@gmail.com)

Sasha Hamolin — Portfolio Website

Hamza Nasim

Hey Webflowers,
I build this custom pricing calculator. The client gave me different scenarios and I converted them into an algorithm that calculates the pricing.

The algorithm is written using Javascript.

One mentionable UX feature is the sticking on scroll of right container. This way the user can have a realtime overview of the price as they select different services without having to scroll up and down.

Hope you find it valuable. Feel free to clone. 

If you want to develop a pricing calculator like this or need any help building your own, email me at hamzanasim6348@gmail.com. I'd be happy to help. 

Complex Pricing Calculator

Showcasing yet another pricing calculator. This time using these UX-friendly, custom-coded select fields to choose an option and traverse through all the options and update prices accordingly. Also using the custom-designed checkboxes for Extra tasks.  

The calculation algorithm is bug free and the site looks great on mobile too. 

If you want to build a pricing calculator like this feel free to reach out to me at hamzanasim6348@gmail.com.

NOTE. The calculator is inspired by https://housekeep.com/. All the assets like icons and images belong to them.

Cleaning Services Pricing Calculator

RSA Creative Studio

Hello there!
Welcome to Text Animation on Scroll!!

Immerse your website visitors with captivating text animations using custom javascript that come to life as they scroll, employing modern web technologies to seamlessly animate typography, enhancing user engagement through a dynamic storytelling experience.

Whether you are a startup looking to establish your online presence or an established business seeking a fresh approach, we are here to assist you. Don't hesitate to get in touch. Let's collaborate and create something remarkable together.

Regards,
RSA CreativeStudio
hello@rsacreativestudio.com

Text Animation on Scroll

Kudzai Mhlanga

Fun little project that I wanted to try after coming across Robin Noguier's portfolio (https://robin-noguier.com/)

Vertical Slider

MakersTeam

An end-to-end software platform for optimized, reliable and sustainable transportation services for fleets and mobility operators

Autofleet

Tilipman Digital

Overview: Ledger Nano X is a product I used since 2016. I loved the project & decided to redesign the landing page 8 years later. For that I used scroll-trigger similar to what is used in Apple. The site received an award on Behance. 1 year later I began giving this project as a test to developers coming wanting to get employment at our agency, all of whom failed it & could not acomplish within 7days. I decided to give it a go & completed it in 14h.

Features:  
1. The navigation was used with vanilla JS & some CSS 🔥 
2. The logo is embeded as SVG & animated through CSS 🔥 
3. Custom CSS for hover interactions 🔥 
4. Ukiyo Parallax Library 🔥 
5. Apple like scroll-trigger done natively in Webflow 🔥 
6. Auto rotating tabs using Webflow JS + JS 🔥 
7. Swiper slider (Swiper.JS) 🔥

Ledger Nano X

Ludovic Losco

Enhance your Webflow website with dynamic page transitions using a bit of GSAP magic!

How to Implement:
1. Assign a Data Attribute: To activate the transition on your internal links, add a custom attribute: `data-page-name="Your Page Name"` to each link. You can personalize this by using CMS fields for dynamic page names.
2. Modify the Code: If desired, you can locate and adjust the code in the 'Custom Code' section within the site settings.

Things to Note:
- This implementation works seamlessly with internal links. External links (those directing to other websites) will not trigger the transition.
- Ensure that the 'transition-cover' and 'transition-text' classes are properly set up in your Webflow project as per the GSAP code provided.

Get in Touch & Stay Updated:
For more Webflow tips, tricks, and updates, follow me on Twitter: https://twitter.com/ludoviclosco

Enjoy!

GSAP Dynamic Page Transition Cloneable

Vibrand Design

Exclusive Webflow Cloneable for our supporters: 

A comparatively simple and visually appealing way to integrate GDPR-compliant videos from YouTube and Vimeo into your Webflow projects, using a uniform video player using Plyr JavaScript Library. 

To use the components in your own projects, please follow the instructions in the "How-To" section of the cloneable.

- Dennis from Vibrand Design

++++++++++++++++++++++++
Support our work and get the editable JavaScript Code on Patreon 👉 patreon.com/denniskarg 👈 or via Lemon Squeezy 👉 https://denniskarg.lemonsqueezy.com/checkout/buy/09ff7c89-cc78-43c7-8237-0995cdb03172 👈

Plyr Video Player for Webflow

Timothy Ricks

Build Your Own Attribute Solutions

Web Bae

Grid Zoom while Scrolling with GSAP Flip and ScrollTrigger.

GSAP let's us enhance an existing Webflow animation because we can tween (animate) pretty much ANY CSS property. In this tutorial I'll show you how I improved a previous grid zoom while scrolling animation by also animating grid-column-gap, grid-row-gap, border-radius, opacity, and transforms with Greensock Animation Platform (GSAP). Both Webflow and GSAP are super powerful animation engines, but GSAP gives us a few more properties that we can animate, which we sometimes need to get that animation feeling JUST RIGHT. This is a great animation to feature gallery content and utilizes important skills with position sticky, transforms, and combo classes.

The GSAP Flip Plugin provides a different but handy way of thinking about building animations by defining beginning and end states with combo classes.

Grid Zoom while Scrolling with GSAP Flip and ScrollTrigger

Memberstack

Here's a beautiful smooth GSAP animation that I see on a ton of different sites. Just copy the code in the page settings and assign the reveal-type class, and you're good to go! Also, it looks waaaay better with Lenis smooth scrolling, so I've included that too.

GSAP Text Opacity Scrubbing

BRIX Agency

Connect any public or private API to Webflow and seamlessly display real-time data with zero delay! 🔥

— — — ❓ What make us stand out from the rest? — — —

⚙️ Integrate any API: No matter whether it seems easy or complex, we can integrate any API with its proper documentation. Simple as that!

⭐ High-quality code: The code quality we produce is outstanding. You don't need to worry about terrible or poorly optimized code.

⏰ Fast implementation: Regardless of the difficulty of integrating any API, we're extremely fast. We don't speak in terms of months but in terms of days and weeks.

✅ Well documented: We ensure that every line of code is clearly commented, so there's no need to worry about encountering unexplained code.

Check out our live preview 👉🏻: https://api-integrations-webflow-utility-brix.webflow.io/

Want to integrate an API to Webflow? Send us an email at ✉️ contact@brixagency.com and one of our Webflow Experts will get back to you within 24 business hours.

Real-time API Integration Webflow Utility | BRIX Agency

Eloy Be

Hey! I built this simple solution that changes the color of the scrollbar as sections enter and exit the viewport for an upcoming project and thought it could be useful enough to share. 

It was made with custom CSS and Javascript.
The Javascript code uses Finsweet's Class Adder and is standalone.

Leave a like if you enjoy and feel free to clone it and use it as a starter for your own projects 🤩

Scrollbar Color Change on Scroll

Bukunmi Ogunmodede

This is a pricing estimate calculator built using Webflow native forms and Javascript.


--------------

Have fun. Available for projects: hi@bukunmi.dev

Pricing Calculator

1070795817

1309657251

1316201488

1316201489

1592612642

1863160016

1905118106

2144870841

2216482092

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

2546957535

2789269995

2857348505

2929119789

3112069432

3258716925

3289310561

3313039722

352651922

3557227276

3590523401

3591394191

3686551772

3913199261

3931106129

3934148661

4041193489

4083567884

4092855684

4103643638

4206156914

451433404

622649767

622649768

657188092

737109165

772001133

882147072

938734410

105340574

1120744071

1131151533

1171384976

1185683512

1197475705

1197746894

1229056119

1234765101

1236803103

1290849437

1292405251

130043074

1322655470

1336067073

1350250754

1380896143

1406455659

1418395020

1433303746

143629253

1455163268

1455742168

1457420719

1458975701

1499868407

1501922903

1557989767

1568482678

1587714147

1665126082

1680586027

1753134293

1775656907

183596474

1857805694

1925696804

1928608458

1944913766

1968719184

2031799369

2085494476

2091902242

21336891

214950889

2161096664

2182233325

2193997669

2195150436

2198334698

2224902271

224017973

23146391

2340184165

2348917033

2354820654

2361218180

2388854597

2433588987

2458909760

2465149363

2487845889

2491501114

2494249199

2502070427

2519229707

2524380347

2529408901

2550320370

2605123638

2636510003

2663519398

2685146257

2702114298

2714120603

2715927287

2718510159

274817750

2753418190

2759911512

2776696732

2781896974

2825044701

2860045578

2867851366

2886076224

2886816758

2907110567

2974679073

2978864049

3017737205

3049370236

3081421921

3091005856

3096464966

319846500

3221145664

3229469216

3245744487

3258263545

3330964648

3375039294

3385366709

3446095163

3472268204

Best Customjavascript Websites | Free Examples & Designs

Discover Customjavascript websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Customjavascript websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. .css-ac9ku6{color:#2E5CFF;font-weight:normal;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}.css-ac9ku6:hover{-webkit-text-decoration:underline;text-decoration:underline;}Looking for templates?

Discover Customjavascript websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?