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

This template uses CSS Sticky and IX2 to showcase a Horizontal Scroll effect on a wide content section.

✓ Horizontal scrolling Sticky Section with Fixed Title

Sticky + Horizontal Scroll Demo

More an experiment than an example to follow... a vertical parallax using only webflow and custom CSS code. It's a bit hard to fine tune and maintaink lot's of tweaking, but it mainly works.

CSS Vertical Parallax

CSS only Parallax with Webflow

Small experiment. Transforming a trend in mockup design into a new website canvas. The micro-animated environmental shadow overlay.

Please like if you clone (and like it).

Shadow Stage Demo

This page shows containers in which the proportions (or aspect ratio) remain the same, even when their size changes. This is possible by changing the top padding to a percentage, which is based on the width of the container. 

Yeah, this sounds super weird, but it works! Try it by resizing this window.

If you have a suggestion on how we can make this more useful, please leave a comment!

Aspect Ratio Boxes

aspect-ratio-boxes

How far can you stretch Webflow's built-in interactions and animations?

To test that, I used only the tools available in Webflow to create this gritty Mad Max scene. That's right, no gimmicks, GIFs or SVG animations, and not even a single line of code written - only the web animations included in Webflow.

This has been an interesting exploration for me, so if you find this useful, feel free to tweak it, share it, like it and use it as you wish!

Mad Max League

mad-max-league

This is an example of how to randomly order content on each refresh using custom code. I tried this because the standard random order setting in the CMS wasn't giving a new random order every time (this seems to have been improved now but maybe is still not consistent). Just showcasing because I've seen it requested but was an experiment, may update it a bit later but you can clone it to see how it works.

My example was for when I get a chance to work on some music stuff, pick one or two things I'm going to do at random.

You can see in the custom code there is a class name which has to be assigned to the cards. There's also an non-cms version at /nocms

Randomly Order Cards (with CMS)

This logo is remade entirely within Webflow. No custom-code, no images, nothing.

The Apple Logo is a unicode character, the Lato font is by default in Webflow, discs and superellipses are styled divs. All the effects, shadows, gradients, highlights etc are added and tweaked from the Webflow UI.

WWDC 2015 Apple Conference Logo made only with Webflow

Apple WWDC15 Logo

💬  We are available for freelance work: info@studio99.design

Follow us on Twitter to get notified when we publish a new item:
https://twitter.com/_studio99

interaction-002

🔸 002 / Comp. / Navigation

Hey everyone!

This is an experiment for a full-screen menu, I had a lot of fun doing it.

Enjoy and don't forget to follow my social media accounts ❤️

Interactive Hamburger Menu ❤️ Cloneable ❤️

Interactive Hamburger Menu

Just a fun experiment with spinning circles using mouse vs. viewport interactions

spinification

Spinification — Clonable Mouse vs. Viewport interaction experiment

Draft for an experimental "double slider" I will use for an e-commerce website that showcases a range of great products.

Feel free to clone and customize. Bg-color adaptable, png files (each side) to be prepared in photoshop. 

(Image rights are with the product producers)

Clone: Double slider interaction

Clone: Double-slider interaction (draft)

The site that never ends. Just demonstrating a piece of custom code that enables continuous scroll forever by cloning the body. Why would you want that? Who knows, but here it is!

Please feel free to clone this cloning clone, but use with caution!

Forever scroll

Forever Scroll

Webflow Experiment template. A template I duplicate each time I need to draft, experiement or showcase a technique or a design bit.

Clone this site, update it with your infos then duplicate it each time you need a fresh site to test something.

- Clean and centered stage within a Flexbox scene
- Style guide with modern defaults applied to titles, paragraphs, links and quotes (Open Sans / 16/18pt). Visible on a style guide page. Style for Caption paragraph
- Handful of convenient gloal colors picked from a modern UI palette
- Webclip, favicon, ready to be updated.
- OG image stating "Webflow Experiment"
- 2 unicode symbols in the project's name: arrow means a template to duplicate (erased once duplicated), check mark means that's an experiment site.
- An info bar at the top to link to your profile and social media

➜ ✓ Experiment Template

Webflow Experiment Template

Happy Thursday! I hope everyone is doing well 😁

Check out the live website to see it in action. I needed an easy way to embed a video into projects so I could explain how they work, and leave messages for people. This is my solution! I hope it helps you on a future project!

Webflow Video Tour Widget

Just a simple Grid Experiment. Tribute to Josef Müller-Brockmann.

Rastersysteme

I have been following Webflow for over a year now and recently decided to build my first site with the tool. Coming from WordPress, I'm excited to see what I'll be able to build once I learn the full potential of this platform. 

Maybe one day I'll replace my actual website with a Webflow site. Check that out here ==>> Raymmar.com

Raymmar's First Project

My First Webflow Website

I had to make this once I realised I could!

Pixel art paint with Webflow! Made with Grid and IX2 in one evening, just having some fun :)

** Not good on mobile! **

Discover experiment websites built by the Webflow community

Discover experiment websites built by the Webflow community