Introduction: https://webkul.github.io/micron/docs.html

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

To get started with Micron.JS, include both the Micron CSS and JavaScript files in the header section of your document.

<link href="https://unpkg.com/webkul-micron@1.1.6/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.6/dist/script/micron.min.js" type="text/javascript"></script>

Add the data-micron="interaction" attribute to the respective element and Voila! you are already there.

<a href="#!" class="button" data-micron="bounce">Label</a>

Micron.JS Interaction Library

In this episode of What In Webflow 017, we walk-through how to create a page transition in Webflow using Barba JS

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Barba-JS-Page-Transition

---

Live site - https://phone-app-page-transition.webflow.io/

Read-only link - https://preview.webflow.com/preview/c...

Clone link - https://webflow.com/website/Barba-JS-Page-Transition

---

Layout designed by https://dribbble.com/gabebecker

Barba JS landing page: http://barbajs.org/index.html

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Barba JS Page Transition

Smooth Move

p5 JS | Sine Cosine in 3D

"Drag and drop so simple it hurts" - Dragula

Yes, there are lots of Javascript libraries out there for this purpose, but Dragula is a fun combination of good branding and smart programming. You can take advantage of it by cloning this project, or using the Github repo at https://github.com/bevacqua/dragula

Draggable & Droppable

Drop Eating

In this episode of What In Webflow 016, we walk-through how to create a clipped text effect in Webflow

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/clipped-text-learn


Live site - https://clipped-text-clone.webflow.io/

Read-only link - https://preview.webflow.com/preview/clipped-text-clone?preview=4ada3b7e6c49140931f08e66128090f1

Clone link - https://webflow.com/website/clipped-text-learn

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

✂ Clipped Text - What In Webflow 016

I would like to introduce an awesome Frankenstein of functionality that we as Webflow creators have been looking to accomplish for some time!

We have been wanting to create a membership portal within Webflow, but with an ease that isn't too technical.

I would like to introduce Authflow which is a walkthrough that shows how to combine the membership portal functionality of Authpro, with the ease of creating websites in Webflow.

You can learn more at http://authflow.webflow.io/

- You can test this integration at http://authflow.webflow.io/
- You can view how it is implemented at https://preview.webflow.com/preview/authflow-template?preview=17d9ee75fda8c3dce846042cbeb782d8
- And, you can clone the template at https://webflow.com/website/Authflow?s=authflow-template

Authflow

In this episode of What In Webflow 015, we walk-through how to create a custom input that controls text in Webflow - https://youtu.be/gOFLokIi8fI

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/What-In-Webflow-015-Custom-Input

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/get-coleman

Live site - http://create-something.webflow.io/

Read-only link - https://preview.webflow.com/preview/create-something?preview=136b23afe8eb972055e201116ce5ed78

Clone link - https://webflow.com/website/What-In-Webflow-015-Custom-Input

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

😲 Custom Input - What In Webflow 015

As web designers, we are always looking for interactions that will set our websites apart from others. 

In this week’s Webflow workshop, we’ll show you how to create a sticky side menu that follows the user within a contained section. We’ll focus on using a IX2 interactions, element structure, and positioning.

Sidebar Workshop

In this episode of What In Webflow 014, we walk-through how to create a reactive text effect in Webflow: https://youtu.be/8-9rX4PjnXM

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Reactive-Type-Effect

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Reactive Type Effect

In this episode of What In Webflow 013, we walk-through how to integrate custom code to have a canvas to draw on in Webflow

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Canvas-in-Webflow

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-draw-and-paint-using-html-canvas

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Canvas in Webflow

In this episode of What In Webflow 012, we walk-through how to integrate custom code to have a skew effect on scroll in Webflow: https://youtu.be/aBKPkqy7OXM

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Skew-JS-Tutorial

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/skew-on-scroll-effect

And an awesome implementation of this custom code can be found at https://durimel.io/nel

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Skew JS Tutorial

In case you missed it: Cross-site copy/paste is here. 

What does this mean? First, Webflow designers across the world are crying tears of joy. Second, modularity … to the max! 

Now, in addition to eliciting tears of joy, this feature also places a new importance on naming elements so they can be accessed and reused without much trouble. 

There are only two hard problems in Computer Science: cache invalidation and naming things 
— Phil Karlton

Why does naming matter? Well, elements named without any structure or naming convention lead to unmaintainable CSS. 

Unmaintainable CSS? 

Noooooo. 
–me, you, all of us. 

Enter BEM. Bam.

Class naming 101: BEM

You have three seconds to make a great first impression on the web. In this week’s Webflow workshop, we showed you how to create a more engaging hero row with a blur effect. We focused on using a CSS3 blur filter, element structure, and positioning.

Blur Section of Hero Image - Livestream

Hi everyone!

I wanted to share the following project as our fearless community leader, Nelson, will be presenting how to blur a section of a hero image.

Also, this affect was also answered slightly differently at https://forum.webflow.com/t/want-to-blur-div-block-above-hero-image/54544

Blur Section of Hero Imag

Today's "What in Webflow" shows how to open a tab using a link.

You can learn more be viewing the read-only link which shows exactly the layout/setup of the website: https://preview.webflow.com/preview/link-to-open-tab?preview=6a82a7c8e694782f21237e62b83aae99

Open Tab with a Link

This was inspired by the following CodePen: https://codepen.io/farmok/full/aYbKOO

Learn about how I used the BEM naming convention to create the page in the following YouTube video: https://www.youtube.com/watch?v=gcKprnFVCUQ

Also, feel free to ask any questions

Create Something

About

Skills

About

About