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

Watch the tutorial for this at https://www.youtube.com/watch?v=Wq5mJIHCDFo

T.RICKS Menu + Slider

Finsweet

Learn how to Combine, Load More, Filter, Sort, and Add Classes to a Webflow dynamic list. Clone the website and walk through the implementation with us.

How to - F'in sweet CMS Library

Useful Webflow functionality upgrades with custom code.

This series offers youtube video walkthroughs and fully commented custom code of 'hacks' you can use on your Webflow site.

All packed into a clonable project! As new Hacks come out, they will be added to this template. Re-clone as new Hacks are added!

F'in sweet Webflow Hacks

.mask {
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #fff;
}

Great browser support (IE is not supported)

web-desire-showcase1

Custom Clipping Mask

Hi Webflowers,
Many of you asked to share my new website as a cloneable so here it is:
👉 advanced hover interactions
👉 clean and reusable way of naming interactions
👉 clean naming using Client First
👉 custom cursor animations
👉 complex type animations
👉 page transitions
👉 scroll-based animations
👉 smooth bg change animation
👉 lock/unlock scrolling on project screenshots
👉 CMS slider for testimonials using Swiper.js
👉 little touches of Attributes and custom code
Very happy to give back to this wonderful community. Clone away!
I lorem-ipsumed client things - you can check the live site for reference at https://www.bencelinski.com/
__________________________________________________________________________
👋 Contact info for collaborations -> pick your platform and shoot me a message:
https://www.bencelinski.com/
https://www.linkedin.com/in/benedykt-celinski/
https://twitter.com/ben_celinski 

Ben Celinski Portfolio Cloneable

Ben Celinski Personal Website & Portfolio Cloneable

This is the latest iteration of my personal website. Love using this as a playground for interactions & trying new things. 

This time around I worked out a way to do some unique interactions using embed elements, a little HTML, & hidden "control" elements to hook Interactions to - see the Hero H1 & the "About" scroll section. Came together pretty well, but may need some performance optimization still. 

Clone away if you'd like!

Darren Harroff

Darren Harroff - Portfolio

Memberstack

Hey Webflowers!

Now, you can build out user-specific pages on your website that are only accessible to one client. We've received quite a few requests for a "client dashboard" from agencies and freelancers, and this is what we've come up with. Feel free to use the template as is for a future client, or change anything you like!

The entire site is built in Webflow, the charts use chart.js + some custom code, CMS is optional, and the login and signup pages are regular Webflow forms.

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

To get started - create a free MemberStack account, and add the URL of your new site during setup. You can select "Start from Template" to load in most of the settings from user-dashboard.webflow.io

User Dashboard Template

#8 - Client Dashboard Template - ZERO CODE 🤯

Cloneable rebuild of https://www.dillinger.tv/

Variable Fonts

Variable Font Interactions

A live, drawing canvas where you can influence the pixels. 

Interactivity can make visitors feel engaged in a fun way. I used sketch.js for the drawing canvas. Use your cursor or touch to draw right on the screen.

David's portfolio - https://www.davidfiz.com was one of the most pleasant landing pages I've seen, and I wanted to see if I could rebuild it with a touch of design. I have layered lots of interactions on top. Sketch.js is used for the drawing effect.

Sketchable Porfolio

Interactive Sketch Portfolio

ThreeSixtyEight

Watch the tutorial at https://www.youtube.com/watch?v=VqSEvzzLoVQ

CMS Map

Interactive CMS Map (Responsive - Collection List)

In this episode of What In Webflow 014, we walk-through how to create a reactive text effect in Webflow: https://youtu.be/8-9rX4PjnXM

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Reactive-Type-Effect

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Reactive Type

Reactive Type Effect

Stacking Slider

Overlapping CMS Slider

You'll find here all the experiments made to answer public questions on the Webflow forum

My Sandbox

My Webflow Sandbox

Wizardry is a responsive technique using EMs that scales like VW but with a max width.

wizardry.

Simple type writer custom code. You can check the custom code field and clone this project.

typewriter

type-writer

Hi!

A free eCommerce template with a lot of cool components and elements. You might need JS and CSS understanding to properly use it.

- CMS based sliders
- Product gallery with slider
- Column sliders
- Grid layout for Product E-commerce Collection

I learned a lot while the development of this template. Hopefully, you guys will find it helpful in your projects.

Any comments and reviews are much appreciated.

Design is a freebie by "Tran Mau"
https://dribbble.com/tranmautritam

Resources:

Finsweet CMS Library
https://cms-library.finsweet.com/

Thanks,
Kamran

Mass Ecommerce Store--Cloneable

Mass Ecommerce Template

Refokus

Use Refokus Rich Text Booster to add Classes, IDs, or Custom Attributes to rich text elements in Webflow so you can style text, anchor to it, add animations, add custom functionalities, and more.

Refokus Rich Text Enhancer

Rich Text Enhancer (by Refokus)

📌📌 WEBFLOW NOW SUPPORTS LOTTIE NATIVELY 📌📌

Learn More about it @ https://university.webflow.com/courses/after-effects-lottie
---------------------------------------------------

Hey! 🙌🙌

Here's a detailed guide on implementing animation inside of webflow using Lottie's bodymovin JS’. 

View the full guide here: https://www.flowbase.co/guides/lottie-webflow

Lottie is a fantastic way to add some extra wow to your web designs, or to help communicate complex messages without limiting creativity or your sites speed. 

In this guide I will explain how to get started with lottie and how to you can add lottie to your own projects. 

I'll also show you some custom code that will get you started with simple JS controls for hover & scroll into view. 

If you're interested in more content like this please consider following us and showing support :)

Need Help? Contact us.

Discover custom code websites built by the Webflow community

Discover custom code websites built by the Webflow community