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

Looking into an old project, I managed to scavenge a couple of SVG animations.
It might be a bit simple, but it shows how a couple of lines can bring to life simple SVG nodes, and adding just some kBs to your site, unlike a gif, video or a sequence of images.

The icons were part of a menu for an advertising platform, so you could choose the type of interaction you wanted for your ad.

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.

card_slider_mobile_small

An intuitive easy to use card slider based on material design principles.

The objective of this widget was that the user could have a quick view of many statistics and chunks of data, from their devices without cluttering the screen.

The user can swipe back and forth, and the cards cycle, just as if the card you last swiped went to the bottom of the pile.

 

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