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 will work on a list of cards that animate out as you scroll down. The inspiration for this widget comes from the first part of this dribble created by Hiwow and looks like this:

Preparations

For today’s widget we will just be using Vue.js, no animations library, that means we will heavily use Vue’s capabilities.
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