How to Build Amazing Web Design Animations — No Programming Required

How to Build Amazing Web Design Animations — No Programming Required

How to build web design animations with uilang

We all know that feeling. You’ve been slaving away on a web design project for the last month and you’re eager to share the fruits of your labour with the rest of the world. Even though you know your design would have a greater impact with some interactive animations, you don’t have the programming experience needed to make it happen. And on top of that, you’re faced with a tight deadline that won’t allow you to learn the basics of interactive programming.

What if I told you that you could create some simple, yet amazing, animations and interactions with a few lines of CSS and by simply writing the interaction in plain English?

That’s where uilang.js comes in — a javascript language created by Benjamin De Cock. By adding the Javascript library to your project and writing some uilang as shown above in a simple element, you can use your CSS to show, hide, and animate things. 

Using a code snippet like this:

You can end up with something like this: (Full Demo - Password: Shopify)

Web Design Animations with uilang: Details

We can create practically any animation or interaction with uilang and a few lines of CSS, check out some of the examples on uilang’s homepage. In this post, we will go over how to design a product feature page on a Shopify store that uses an image gallery with a zoom feature to highlight the fine details of our product.

You might also like: Tips for Using Snippets in Your Shopify Theme

Step 1: Setting up our thumbnail images

When the thumbnail images are clicked to reveal the larger image, the image size will be set to 400px by 300px. So we will begin by setting up our images to that dimension.

How to use uilang to animate web design elements: Sketch Preview

Step 2: Adding uilang.js to our shop’s theme

On your shop open the theme.liquid file [Go to: Online Store, Themes, click the button with ‘…’ for your theme, and then click “Edit HTML/CSS” from the dropdown], and add the following before the tag: 

This will add the uilang.js script to your entire shop so if you want to add animations and interactions to any page of your shop, you will be able to quickly and easily.

Step 3: Create a new template page

For our purposes, we’re going to create a standalone page to highlight the product details of a handbag. This standalone page will have it’s own page template: page.feature-product.liquid within Shopify.

Open the theme editor and inside the Template folder click on ‘Add a new template’, select ‘page’ from the dropdown menu, and provide your page template with a name.

How to build web design animations with uilang: Animate web design elements page template

Step 4: Writing our HTML and CSS

When our visitors click on the product thumbnails, we want to display the larger image with a nice border and caption to describe the image. UILang will handle the functionality, while our CSS will handle the image sizing, styles, and animations.

In our newly created page template, we’ll write our HTML and image references above the {{ page.content }} liquid tag. We will organize our image thumbnails into a list:

Now that we have our HTML written for the gallery, we can start on styling. On the initial load our CSS will shrink down the original size of our image by 50%:

-webkit-transform: scale(.5);
transform: scale(.5);

When the thumbnail is clicked the transform will be removed to show the original image size, which is the larger image.

We will also add a cool transform animation when the image size changes along with showing the caption which is wrapped in a tag. This is styled to provide us with the nice border and drop shadow around our image and caption.

p {
  padding: 0 16px 15px 
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  background: rgba(255,255,255,.97);
}

To make all this happen we will add a class of .open to our < li > tag that will zoom and animate the image on click. The transform animation of the .open class removes the initial transform on the < li > element and adds CSS3 transforms to scale the image.

You can view the full CSS styles below, but getting into the details of how these styles work is outside of scope for this post. Please refer to this article to learn more about CSS3 transforms.

Initial Transform:

.open Class applied:

View full CSS example here.

Now that you have added your CSS, you should have a similar layout:

How to build web design animations with uilang: How to build css animations thumbnails

If you add the open class to one of the < li > Items you should see something similar to this:

How to build web design animations with uilang: Zoom image CSS animation

Step 5: Writing the uilang for our animation and interaction

Now that we have our CSS implemented for our animations, we will write our uilang to add the class “open” to our < li > list on click.  We will start by writing a tag below the HTML we wrote earlier and inside that tag we will add our .open class to our target < li >.

This will add the .open class to scale the image but now we will need to transform the image back to its original position by removing the .open class. We can do that by adding the following:

That’s it, now you have a beautiful feature image gallery. As you’ll notice, the most difficult part was adding our HTML and CSS transforms, the rest just took two lines of plain english to tell uilang to add or remove a class to our < li > elements.

How to build web design animations with uilang: Final product, animated zoom gallery

Start experimenting

UILang is a great library to use CSS to show, hide and animate elements. This product feature gallery can be complex to write in pure javascript. But by using CSS Transform and two lines of UILang, we were able to create something pretty great without too much difficulty. There are other great examples which are even easier to implement on uilang.

Get out there and start experimenting on your design!

You can view the HTML/CSS and code samples here.

You might also like: Creating Useful CSS Hooks in Liquid

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.

Grow your business with the Shopify Partner Program

Learn more