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

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

A couple of weeks ago I watched this talk about CSS grid and how it changes the way we layout our web pages. I decided to give it a go, tested some basic layouts and then changing the way they display with some media queries.

I was amazed by how easy it is and how it cures your site divitis, here’s an example of how drastically you can change your webpage element’s position  without lots of complicated rules:

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.