Deep Dive week

What are microinteractions

Micro-Interactions are like any other interactions with devices, which are used to communicate meaningful feedback to the users because a user has to know what happens when an action is performed. It's a human tendency to expect something to happen when you click a button, scroll a page, add an item to the cart, or swipe a card.

Source

Microinteractions always have a trigger. This can be both a user, i.e., clicking a button, or the system meeting a set of predetermined conditions. After the trigger event, the system behaves after a certain preset rule that determines what happens – while the feedback lets the user know what is happening. The loops & modes are the last part of the interaction. The step that states what should happen next.

What is SVG - Scalable Vector Graphics

Previously we have exported SVG files drawn in design programs such as Adobe Illustrator and treated it as an image. But the content inside the SVG file is code-looking and works like HTML. This means we can code SVG directly in our HTML file.

Important: Now that SVG is vectors, we do not work with fixed values such as px but relative values - units. This is why the drawing board here doesn't have any description but 100X100.

Inside the SVG tag, you can work with a wide array of elements. In this case, a rectangle. SVG element reference

Now that we have created an SVG file directly in the HTML, we can animate it using CSS. It is just a matter of selecting the right element.

This means we can animate the most advanced SVG files if we are able to select the correct elements.

With this basic knowledge about SVG and how we can manipulate it. In the following, I have created some microinteractions elements you can try out yourself- and use the ideas behind in your projects.

Preloader

Click to see the preloader.

1. In Adobe Illustrator, I drew the SVG icon I wanted to animate. – A set of eyes.

   I placed the SVG in my HTML and arranged the different elements with 'id' tags. As you can see, the SVG has already been styled directly in the HTML. This styling is integrated from Illustrator.

   

2. Go to the CSS file and style the preloader. Make sure it takes up the entire screen. A nifty little feature is to 'turn off' the curser while the preloader is on the screen.

   

3. Some preloaders work alone as information. They are informing the user that something IS happening. With these kinds of loader information, JS controls the animation where a 'removing-class is added to the 'container' using an event listener.

   

   In this case, the preloader works more as an animation that has to finish before the preloader disappears. This can be controlled by CSS alone. But for the example, the 'done' class is added to the preloader with JS.

That's it. Now you have animated your SVG and turned it into a preloader screen.

Click to experience the preloader.

Dive deeper

• youtube

Handwriting

Another commonly used SVG animation are the 'dasharray' and 'dashoffset'. When using these, you can create a handwritten function.

Click to see the handwriting.

1. Before styling and animating, the signature is created in Adobe Illustrator. Here it is crucial to make the object by using the pen tool.

2. Now the SVG is ready to be placed and arranged with 'ID' in the HTML.

   

3. Next, you animate each ID. In this example, we are targeting the 'M' in the CSS. Add 'stroke-dasharray' and type the exact length of the path. And as an oponent, add 'stroke-dashoffset' and type the same value.

   

4. By moving the 'stoke-dashoffset' from 1129.7293701171875to 0the letter 'M' appear manipulated by the allocated CSS animation

5. Continue by targeting the next object in the CSS. If you want the handwriting-look, the following animation in line should have a delay and so forth.

Use the same concept to create microinteractions on, i.e., hyperlinks.

Using the 'stroke dasharray' and the 'stroke-dashoffset', you can animate countless line drawings, ways of appearing, and ways of content to disappear.