Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

Today we are going to create a password submit form, that validates the user input in real time.
The inspiration comes from this submission created by ramykhuffash and looks like this:

Preparations

For today’s widget we will be using Vue.js, and for some animations we’ll use TweenMax.

If you want to follow along you can fork this codepen template that already has the dependencies.
Continue reading

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

This time we are going to create a temperature slider, although it can be used for anything.
The inspiration comes from this submission created by ramykhuffash and looks like this:

Preparations

For today’s widget we will be using Vue.js, and for some animations we’ll use TweenMax. Also we will need a temperature icon, so we’ll be using the one from Font Awesome.

If you want to follow along you can fork this codepen template that already has the dependencies.

Continue reading

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

This time we are going to create a 3D widget that “looks” at the cursor as we move it through the screen.
The inspiration comes from this dribble created by Steven Hanley and looks like this:

Preparations

For today’s widget we will be using Vue.js, and for the “look around” animation we’ll use TweenMax.

If you want to follow along you can fork this codepen template that already has the dependencies.

Continue reading

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

I’ve been quite busy for a couple of weeks, preparing and giving a Vue.js course in Wizeline Academy, but I’m back with another interactive component.

Today we’ll make a list of cards that animate when hovered (or clicked in mobile), the inspiration comes from this dribble created by Kreativa Studio and looks like this:

Continue reading

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

Today’s the turn for a navigation component with four colorful icon buttons.The inspiration comes from this submission and it looks like this:

Preparations

For today’s widget we will be using Vue.js for the interactions, and TweenMax for animations. If you want to follow along you can also fork this codepen template that already has the dependencies.

We will also use FontAwesome icons, so make sure that you add this link to import them:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Continue reading

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

Today I’ll be doing a component that changes the width of a two column layout when a button is clicked. The inspiration for this widget comes from this submission and looks like this:

Preparations

Like I’ve been doing before, we will be using Vue.js for the interactions and the GSAP platform for animations. If you use something like codepen you can find them in the libraries.
Continue reading

This is the first post of a series called Widget of the Week.

As the name implies I’ll be creating every 7 days a widget based mostly on dribbles from UI Movement.

Transforming a gif to a full working HTML control is not as easy as it sounds, so I’ll be also writing about the process and explaining the reason behind the solution for the tricky parts.

Without further ado, this week widget is this toggle control:

Preparing the elements

First we need to identify the parts of the widget, at first sight it looks like we need a container for the control, a background, the ball, and the faces inside the ball.

Continue reading

platform_chooser_smallAn animated menu that is used to change the current platform.

The problem that this widget solves is to be able to change platform quickly without having to load another view that just shows the platform listing.

When a user clicks the current platform, it returns to normal, in any other case, the content is hidden and a loader appears to indicate that the user is being redirected.

 

The animations were made with the GSAP and the cards designed with Materialize.