Some websites even use motion design with their products, for example Apple who use vertical scrolling as a trigger for applying motion to their product mockups.

There are some remarkable examples which show just what can be achieved when applying elements of motion design to a website. In this article we are going to round up a selection of the very best.

Pipefy

Pipefy uses motion design in the hero section of its website. It displays a user interface demo of their product with a hypothetical user interacting with and showcasing the platform.

Figma

Figma’s main selling point is design collaboration. As such, it demos this using effective screen capture video footage in the hero section.

ZenDesk

ZenDesk’s Answer Bot is demoed on their website using a minimal and simple example of motion design.

Museum of Science + Industry

The Museum of Science + Industry uses motion graphics and video in the hero section of their website to illustrate each active exhibition. It adds a great deal of visual interest and effect.

Adidas

Adidas Climazone’s landing page uses motion design via user scrolling as the trigger. As the the user makes their way down the page the graphics and images morph and change.

Stripe Sigma

In possibly the most impressive example of all, Stripe uses motion design in multiple instances. The hero section uses a video to illustrate the product in action, while below a scrolling ticker of FAQ cards makes its way from right to left, changing color over time.

Snappd

Snappd’s homepage scrolls through a selection of video stories. When one lines up with the iPhone mockup, it triggers the video to play.

ZKIPSTER

ZKIPSTER uses one of the more traditional implementations of motion design: a full size background video. It does so with great effect, applying a filter on top for greater contrast and subtlety.

Shopify

Shopify uses motion through its product imagery. In this instance, the user’s scroll location is used as a trigger to expand the product mockup and reveal its complexity within the simple design.

An Interesting Day

The ‘An interesting Day’ website applies motion by implementing a parallax effect which tracks the point of the user’s cursor to produce a depth effect. It’s subtle but highly effective and satisfying to experience.

In the past few years it has become an integral part of any mobile design process. Interactions are often initiated by a tap or swipe, or other interactive action. The interaction encompasses the result of this trigger. Think tapping a floating action button on Android. The interaction might be an animation of the button icon, and multiple menu items sliding out from the top.

In this article we are going to look at 10 beautiful examples of mobile interaction design across both iOS and Android.

All the Mobile UI Kits You Could Ask For

DOWNLOAD NOW

Chat Interaction

In this example, a unique interaction is applied to the lower left floating action button. Upon tapping, a set of four option expands within easy reach of the user’s hand.

Music App UI & Interaction

This music app incorporates some beautiful interaction animations to transition between popular music and now playing.

Event Cards iOS Interaction

This events app design furthers the beautiful user interface by adding some animations and transitional effects for browsing through the event cards. The result is visually appealing and very intuitive to use.

Jelly Button iInteraction

This more complex design includes multiple instances of interaction design. The expand icon, sliders, gender illustrations, and skill set filters all use subtle animations and transitions to present a polished user interface.

Album Radial Interaction

In one of the more novel examples, this music app uses animation to replicate the visuals from a traditional record player. The artwork rotates slowly and produces a very attractive and satisfying user interface.

Signup Interaction

This sign up form uses some subtle but highly effective transitional effects between clicking primary buttons and filling in data.

Playlist Radial Interaction

This music app uses interaction design to explore some alternative options for browsing playlists. The result is an innovative and highly visual menu which stays within reach of the user’s thumb at all times.

Login Interaction

This mobile login screen uses some perfectly executed paper-turning animation effects as the fields are completed for each step.

Freelancing App Interaction

This interactive navigation concept revolves around a circular point at the bottom of the screen. From there, the radial menu is expanded and the individual screens are also expanded with great visual effect.

Application Process Interaction

This app shows how the most subtle of interaction designs can produce the most satisfying results. As the time slider is increases, the plant glows larger and gives the user visual feedback on their input.

Many designers use it to create animated typography, loading graphics, icon transitions, mobile user interface mockups, illustrations, and more.

A major upside to After Effects is its vast library of high-quality templates across the web, many of which are free to download and use as you please.

In this article we are going to round up a handpicked selection of the very best free Adobe After Effects templates for you to use in your next web design project.

Unlimited Downloads: 500,000+ Fonts, Stock Photos, Themes & Design Assets

DOWNLOAD NOW

Free After Effects Transitions

This stunning selection of transitions by Basti includes a range of effects, perfect for loading animations and presenting content.

Loader After Effects Freebie

This simple folding effect is ideal for use as a loader on minimal, clean website designs.

inFullMobile Icons Freebie

These beautifully intricate icons are fully animated to an exceptionally high standard. They are perfect for any landing page or portfolio content section.

Checkbox

These subtle checkbox animations for After Effects are great for including in presentation mockups and website graphics, as well as tutorials and onboardings.

AE Send Mail

Another exceptional animated illustration, this time by PixFlow. The vibrant colors offer beautiful contrast and the graphic itself would fit excellently at the bottom of almost any website.

Free Touch Indicators

These touch indicators are perfect for including in portfolio user interface mockups, onboarding flows, and tutorials, to help the user visualise how an interface works.

Menu / Close Button

The hamburger to close icon transition is becoming more and more well known and intuitive for users. This free Ae file offers one of the more interesting and creative approaches to such an animation.

Personal Voice Assistant

Housing similar effects to Siri, this voice assistant animation is visually impressive and offers a range of uses including for loading, progress indicators, music playing status, and visual background effects.

Gilbert Free Animated Typeface

Gilbert is a highly refined and top quality animated typeface. Its animation qualities and colorful design make it perfect for portfolio and landing page hero sections.

Free Tapered Stroke Preset for After Effects

This tapered stroke preset for Ae is beautiful in combination with a handwritten style font. It would be particularly effective for use where handwriting is present, for example signatures or letter-style sections.

Taking the iOS or Android operating systems, you can see that almost every action is executed by some type of interaction. Whether this interaction comes in animation terms, or tangible feedback such as a taptic engine, the possibilities are never ending.

All the Mobile UI Kits You Could Ask For

DOWNLOAD NOW

Example #1 – Siren

Siren uses many different interaction animations in its app design. The first of which are the elements that move with varying delays to produce something of a ‘wave’ effect when you swipe left or right.

This provides additional feedback to the user as to the overall structure and flow of the main page. The app also utilizes shrinking elements to expand the interaction area of the interface, while ensuring critical information always remains on show.

Example #2 – B&O Play

The B&O Play app implements a series of satisfying transitional effects upon interaction with scrolling, color choice, and selection.

There are a number of effects for each interaction, including delayed horizontal motion, icon pops, and even visual feedback in the form of attaching imagery to the scroll area when a user has scrolled to the top of the list.

It uses these effects subtly, with precision and restraint, resulting in one of the finest examples around.

Example #3 – Bthere

Bthere’s app is a delightful example of interaction design in order to entice the user through the onboarding process – something that is typically a somewhat tedious part of the user experience

By animating the icon transitions and background colors, as well as the individual icon elements themselves (including the scooter’s exhaust!), Bthere has conveyed the fun and light-heartedness of their brand effectively, while likely improving user conversion and retention upon download of the app.

Example #4 – Housing

Housing uses subtle interactions throughout their app. Upon adding a new feature, whereby the user could call an Uber to a viewing, the design team needed to find an unobtrusive way in which to bring attention to this new addition.

The result, as shown above, is enough to grab the user’s attention momentarily, while not being in-the-face of the user. The execution of both icon design and color combines effectively to improve conversions as well as visual appeal.

Example #5 – Neighborhood

The final example, Neighborhood, implements interaction design in almost every aspect of the app, throughout icons, popover elements, messages, and panning.

The attention to detail in every step of the design has lead to some visually satisfying results, including a user menu that is somewhat reminiscent of Facebook’s chat heads.

Overall, it results in a cohesive user experience with plenty of visual feedback and easy-to-use features.

Finished

As 2017 gets underway, the abundance of tools now available to designs and developers, should see some even more spectacular and unique results in mobile app interaction design throughout this year.

Which interactions would you like to see more of in 2017? Share them below in the comments!