🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿Typography available under SIL Open Font License 1.1 (Inter)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Webflow Pricing Component (CLONE)

Thanks to Ezra Siton who in the forums gave the idea to use this script.

js-ripple-effect

Winner of Honorable Mention on awwwards
Winner of WOTD - Best UX - Best UI - Best Innovation on CSSDA

Moon UltraLight. 
Meet Mobile’s Most Revolutionary Lighting Device

Live Site:http://moonultra.com/

I took on this brief unsure if I could bring the clients idea's to life. Apple was my only reference but these animations and interactions are truly bespoke to Moon UltraLight. 

Check it out. 

Design by @danielacuttdesign
Build by Joseph Berry

Moon UltraLight

100% Webflow IX2 full-screen menu. I've tried to keep the layout and interactions as straightforward as possible so it can be cloned and more easily integrated across different projects. 
  
* Works on both desktop and mobile
* Original Inspiration: www.Varagon.com

Immersive Menu

Learn how to integrate a mind-bending Three.js animation in your Webflow project. Guide by CJHersh

View the full guide on flowbase.co

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

❤ Follow the Creator:

This guide has been built by community member CJ Hersh. Please follow and show your support for his contribution.

webflow.com/cjhersh
https://www.cjhersh.com/

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

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Refer to Guide Page

WebGL Grid to Fullscreen | Flowbase Guide

Tutorial to build mouse interaction here. https://youtu.be/maYjDF1_zMQ

After seeing Niccolò Miranda FatFatFat Festival site I was instantly inspired to see if I could recreate some of the interactions. With my own interpretation I have created a unique micro site with all interactions created in Webflow.

Joseph Berry Music

WebGL Integration with Webflow that's surprisingly easy to work with. 

If you'd like me to make a tutorial with cloneable demo, please 'Like' or 'Comment'. I'd be happy to share some of the critical details that go into creating this interaction, inside a Webflow project.

Coneable demo can be found here: https://webflow.com/website/WebGL-Grid-to-Fullscreen-or-Flowbase-Guide

Original code by Daniel Velasquez 
Repo: https://github.com/Anemolo/GridToFullscreenAnimations

WebGL Grid To Fullscreen

After building Webflow projects for several of our clients, we thought why not build our new agency site on Webflow. Welcome to the new face of Azai Studios.

Azai Studios

A refresh redesign of the TimeFrame app. This project was built a few days before I joined Webflow Team.

TimeFrame

Scroll and drag triggered slider jam packed with some pretty cool tweens / animations. I modified the original version, by Jesper Landberg, for use in Webflow. 

The native scrollbar is left intact so you should be able to integrate additional native Webflow scroll-based interactions. 

This prototype does not work on mobile devices - Consider Webflow's native slider as a replacement on mobile.

Bouncing Scroll

Update to my personal site. Took heavy inspiration from classic macOS. There are some fun experiences for visitors to find. 

Everything is done natively in Webflow using interactions including the color palette changes. I'm using CMS collections to drive the projects, tutorials, videos, and Webflow Weekly contents.

The whole site is a single static page and then the collection pages.

The UI is the same no matter where you are thanks to symbols which makes edits much easier.

Class naming and combo classes were huge for making the interface and interaction work smoothly.

EDIT 2020-11-10: this can now be cloned

mattOS

The project was made to help a forum question > https://forum.webflow.com/t/rotating-text-in-a-sentence/76920

Changing words in a sentence

This is our new agency website that we're thrilled about it! Check it out and let us know what you guys think!

Kaeles — Digital Agency Portfolio Site

**UPDATE**
New Countdown timer coming soon to https://codecrumbs.co
- Allows Multiple Countdowns with only 1 class
- Change each deadline by attribute for flexibility
- 3 lines of code for you (in total 😁)

I've been looking for a countdown timer that I could easily integrate into Webflow and stumbled across this simple script that made it possible. I forget the author on CodePen (I'm sorry), but I figured I would share the project in case this can help you too. 

It's really easy to add and style into your own project. The numbers have separate ID's for "Days", "Hours", "Minutes" and of course "Seconds". To change the time just go into the javascript under "Custom Code" for this page and change the date. It will be written like so: "2018-09-28-00" (pretty sure, you'll see it).

Then style the classes as you wish! 🤙🏻

Updated: 08-03-2018 (Javascript code works for all browsers).

Project Countdown

There are so many fantastic projects in the Webflow showcase, and (if they're cloneable) you can copy & paste elements into your own projects. 

That's insanely awesome!! 

The only thing that's been missing from the showcase is the ability to discover projects with a quick search. This is the first step in that direction. More to come! 

Please like, follow, and subscribe for updates. P.S. I'm open to feedback and feature requests.

showcasesearch

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.

Willy Wheeler