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