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)

💬  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

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

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

This is a fun AI experiment. 

I generated the striking visuals of this website with the AI artwork generator Midjourney. Chat GPT generated the copy and Gigapixel upscaled the image.

A more in-depth explanation is available below the website's hero section. 

Branding ai

AI generated landing page (Midjourney, Chat GPT, Gigapixel) 

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

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

A fun Interactive Hero made in T-minus 301

AMExperiment2021

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