builders-webflow-cms-a8d3acb09b27d005b1

Experiment with Webflow IX, a breakdown of a combined 3D animation.

Animated 3D Arc

Clone this Webflow build of an element designed by @learnframer on Twitter. https://twitter.com/learnframer/status/1630115618543505408

Animated Rainbow CTA

Small site showcasing techniques reviewed during December 2022 Flow Party about Fonts: including font features, Color fonts, layered fonts, variable fonts.

flow-party-fonts

Give your divs that peanut joy, use blending modes and other CSS properties to craft a metaball-like fusion effect, and animate it with Interactions.

Make CSS Metaballs!

This project features an horizontal timeline of events. You can navigate it by scrolling vertically: the horizontal timeline view and the vertical list stay in sync. The vertical list shows extra events, notes and links.

The timeline is CMS based: there are two collections, one for the events, and one for the categories of events. Each year of the timeline is made out of one Collection List.

This demo uses real data from Webflow's updates: new features, announcements, events...

There's more info about how it was built and how it works with CMS and CSS Calc at the bottom of the page. The technique for the horizontal scrolling sticky section can be found in the "Sticky + Horizontal Scroll Demo" project on my profile.

You can clone this project, delete the data in the Events and in the Categories Collections, and make this site your own.

CMS Timeline Template

This is my 2019-2023 sandbox, it contains many experiments and solutions developed to help forum users.

My Sandbox

Make fullpage.js work in Webflow in 4 steps. Fullpage.js allows you to add a scticky scroll to your site.

Fullpage.js Webflow Integration Template

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

Sticky + Horizontal Scroll Demo

Lettre d'info mensuelle en français, traitant de webdesign, éditeurs temps-réel et Webflow. La Lettre est éditée par Louis Buignet et Vincent Bidaux à La Rochelle, France.

La Lettre — Landing page for a French Speaking Newsletter about Webflow

The Navbar element of this template morphs into a bottom bar on mobile devices instead of turning into a hamburger menu.

Responsive App-Like Navbar

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

Webflow Experiment Template

Victorian CMS made for Le Bathyscaphe, a Steampunk / Art Deco bar and restaurant. I had previously worked with the vectorian style for their printed comunication material (the project can be seen here https://www.behance.net/gallery/57793969/Victorian-tabloid-newspaper-for-Le-Bathyscaphe-bar ) and I decided to bring this alive for their website.

The typographic part was very funny to work with, also visitors are facing a staggering 650ko of fonts to, download, but that's a choice we made.

The little submarine has been animated using Webflow's IX2.

Le Bathyscaphe

A set of Javascript files to translate dates from english to your local language, and to convert time from US to international format. Especially useful for your Webflow CMS international clients.

Edit: as of 2019.02.15, 24h international time format is supported by Webflow.

pardon my French! Translate your CMS dates and time

This is a site for a cruises company. Had a lot of fun designing this site. I made all the 3D illustrations, drew all the icons, shot all the pics and videos.

Features: 

• Schedules are managed with the CMS so they can be sorted and filtered
• Structure of the database makes it simple to import all the data with CSV
• Dates are translated live with JS
• Hours are converted from AM/PM format to military/international with JS
• Mobile views get a special app-like bottom menu
• there a /slide page that display an elastic fullscreen section, crafted for HD and 4K Tvs for conferences booths, shows and shops

la-rochelle-croisieres

A set of Photoshop, Illustrator, Sketch, Adobe Xd and Affinity Designer templates to generate useful assets for your Webflow projects.

Birdhouse — Webflow Assets Template

This website is made with Webflow and is a demo on how to set a cookie using Jquery, and use it to show a popup message or not. It's supposed to show you a popup message on your first visit every 24 hours. 

You can clone this project and see how it's made.

Webflow Cookie Template

Let this made-in-webflow robot chose the appropriate HTML5 tag for you element. Answer its questions and it will tell you what semantic element to use and why.

This mini site comes with an article for the Webflow Blog, about HTML5 Tags. https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide

Vincent Bidaux

About

About

About