Happy Wednesday! Testing our Webflow's new creator credits feature. 

I rebuilt the Memberstack profile modal, spiced up the design, and added a few new sections. You could adapt this profile modal to work with any site, any usecase, or any layout. 

It's mobile friendly down to 300 pixels. 

Happy Wednesday,

----
Duncan Hamra
Co-founder, Memberstack Inc

Webflow Profile Modal

I made this to support Memberstack customer who was looking to preserve the order of a list set my a member. It's using about 100 lines of javascript, and 6 lines of custom CSS. Everything else is native Webflow. 

Draggable Input Tutorial for Memberstack

Happy Wednesday! In this project, I want to show you how to set up a passwordless login form with Memberstack. If you need a full tutorial, check out the link in the top right corner that takes you to our documentation. There, you'll find a video that explains everything step by step.

What's unique about this project is that I've created two logins forms on the same page - one with a password field, and one without. I've used Webflow interactions to allow members to toggle between them, so they can choose to either log in with an email and password or just an email. You can customize which form is the default, depending on your preference.

And the best part is that everything is fully customizable within Webflow. If you have any questions about the project, feel free to ask - I'm happy to help!

Passwordless Login

This virtual timer was modelled after a clever countdown timer design by timetimer.com. 

The website + visual interactions were made in Webflow, the audio is from Freesound.org, the red circle animation is from Lottiefiles.com, and the code which plays the audio was generated by me in ChatGPT.

Scroll down past the instructions to see a quick video tutorial which explains how it works. 

Timer Instructions

60 Minute Time Timer
Refresh the page. The timer resets itself to 60 minutes anytime the page reloads. 

55-5 Minute Time Timer
Simply hover and click on the time you want. This will wind the virtual timer automatically and begin the countdown. When time is up, a relaxing and slow-to-build audio file will begin to play.

How to Build a Virtual Timer
The following video is about 8 minutes long and explain how the project works. If you have questions, feel free to leave a comment in the Loom video. https://www.loom.com/share/fb8acac0da6245959fbe4e26574d550c

Free Virtual Time Timer

I've been asked a number of times how we built the old Memberstack 1.0 hero animation. Finally getting around to making it clonable! If you have any questions, just let me know. 



Memberstack Homepage from 2020

In hindsight I should have released this before cyber Monday... but here we are! Feel free to use these promotion UIs for anything you like. Free months, a percentage coupon, a promotion, a discount, a fixed $ savings,  

Coupons and Promotions UI

We just added GitHub social logins to Memberstack! This means you can now create a 100% Webflow "Sign in with GitHub" button and actually tie it into GitHub authentication 🎉

Plus, we have a nice video tutorial that can walk you through the entire process. https://docs.memberstack.com/hc/en-us/articles/9151629563291-Github-Authentication

GitHub Auth

Made this a few months back when exploring new brand guidelines. I still really like it! Hope you do it 😁 All of the effects where accomplished inside Webflow.

Glassy UI

Hi there 👋 This is a demo project for Memberstack 2.0. Sign up for update and early access https://www.memberstack.com/developer-program

Memberstack 2.0 Demo Project

Happy Tuesday! 

Here’s a simple sign-up form with a show/hide password feature, Memberstack installed, styled select field, checkbox, email, name, and password. 

If you have any questions, feel free to drop a comment below. Thanks!

Started with a cloneable project by Jonathan Waterworth -  https://webflow.com/website/rule-studio

Service Membership Login & Signup

Happy Tuesday! 

I took some time to revise one of the community's open-source projects and added Memberstack to it. 

This project is a multi-page template to sell offline services like lawn care, music lessons, courses, etc. It includes an about page, service section, login, signup, a placeholder welcome page, and more. 

👏 Original project by https://webflow.com/jonathanwaterworth

If you have any questions, feel free to drop a comment below. Thanks!

Service Membership Template

Happy Thursday! 

I recently needed a way to dynamically generate a table of contents that works with the Webflow CMS. Figured it might benefit others to share it in a simple cloneable project.

Everything is styled and configured to be super easy to drop into your project. The code is located in embeds, the page is a static Webflow page (not connected to the CMS), and all styles are applied via class names so you won't lose anything during the copy/paste process. 

I hope it serves you well!

The layout is by Flowbase, the sticky table of contents is by Flowrite (1), and the code styling is by highlight.js (2). Photos from Pexels.

1. https://www.flowrite.com/blog/dynamic-table-of-contents-on-webflow-cms
2. https://highlightjs.org/

CMS Table of Contents

Happy Thursday! 

I recently needed a way to embed styled code snippets into the Webflow CMS. Figured it might benefit others to share it in a simple cloneable project.

Everything is styled and configured to be super easy to drop into your project. The code is located in embeds, the page is a static Webflow page (not connected to the CMS), and all styles are applied via class names so you won't lose anything during the copy/paste process. 

I hope it serves you well!

The layout is by Flowbase, the sticky table of contents is by Flowrite (1), and the code styling is by highlight.js (2). Photos from Pexels.

1. https://www.flowrite.com/blog/dynamic-table-of-contents-on-webflow-cms
2. https://highlightjs.org/

Styled CMS Code Embeds

Happy Wednesday! 

I took some time to revise one of Finsweet's or Diego Toda de Oliveira's (can't tell) open-source projects and added Memberstack to it. 

This is now a multi-page template with a landing page, signup, login, pricing, and welcome page. The landing page includes a hero section, navbar, fully responsive design, FAQ, How it works section, client testimonials, Product section, CTA, footer at the bottom.

All of the copy is a placeholder & the images are from Pexels so this project is 100% yours as soon as you hit clone!

If you have any questions, feel free to drop a comment below. Thanks!

SaaS Login Template

Happy Wednesday! 

This free webflow template is a login and signup page with fun labels, show/hide password functionality, and Memberstack installed.

If you have any questions, feel free to drop a comment below. Thanks!

SaaS Login

Happy Wednesday! 

I took some time to revise one of the community open-source projects and added Memberstack to it. 

I added a fun hover interaction, removed/renamed a few classes, updated the page copy, change font sizes to make the prices feel smaller, and added Memberstack links to all of the buttons. 

This free webflow template is a pricing page with multiple sections. Includes monthly & yearly pricing, FAQ, discount for non-profits, charitable causes, and a money-back guarantee. 

Note: you could use this template with Memberstack's pre-built UI (the one you see in the template now) or you could link directly to your own custom signup form. Totally up to you.

If you have any questions, feel free to drop a comment below. Thanks!

SaaS Pricing Template

Happy Friday, everyone 👋

I found myself wondering if I'd be more likely to use assets from open-source Figma projects if they were already available in Webflow. So! I decided to give it a try starting with these 18 hand-drawn SVG arrows. 

The top section includes 18 different arrows inside of individual custom embeds. The awesome thing about SVG's (when set up properly) is they can inherit their color from the font-color of the parent element. 

Is it absolutely essential? Nope! 
Is it cool and professional looking? Absolutely! 😁

A link to the original Figma file can be found at the bottom of the project. 

I hope you have a wonderful weekend!

18 Hand Drawn Arrows

Happy Friday, everyone! 👋

I had some fun recreating the wonderful Yeti Login Codepen by Darin S. The project is 100% Webflow and relatively simple all things considered. I broke the SVG into parts, added a hover-over-element interaction to the background, & hover in / hover out interactions to the email, password, and login fields. 

The "rotating" head effect is created by moving close-up elements slightly more than background elements. I.e. the nose moves 11px to the left or right, while the mouth only moves 9px. The blue face SVG moves 6px, and the body doesn't move at all. 

Here's the link to the original project https://codepen.io/m3eu/pen/VwYBbwO

If you have any questions, feel free to drop a comment below. Thanks!

Duncan Hamra

About

About

About