IntuiFace and the User Experience Trends of 2017 - Trend #4: Scrolling Animations
This is the fourth article in our series about the top user experience trends of 2017 and how to implement them in IntuiFace.
User Experience Trend # 4 – Scrolling Animations
Scrolling Animations: What are they?
Scrolling animations are animated events that occur as an app or website is scrolled. There are multiple types of animation effects that could complement scrolling, from parallax effects to item appearance when a certain point on the page is scrolled into view. Anything is possible and designers tend to become really creative as long scrolling webpages become more common.
Scrolling animations can significantly enhance user experience when all visual effects are smoothly integrated rather than executing as several independent steps. Moreover, this sort of interaction is aesthetically pleasant, a good goal in an attempt to retain user attention.
Scrolling Animations – When to use them?
To determine whether you should use scrolling animations, consider the following advantages and drawbacks. According to creativebloq:
- Enables creative storytelling and visuals
- Aids simple navigation
- Promotes interaction
- With infinite scrolling, entices users to stay longer
- Works well with touch controls
- There will always be people who simply refuse to scroll
- Can be confusing and disorienting
- Long-scroll may distract from the notion of a fast transactional experience
- May slow experience speed, especially with video content or parallax
If you intend to use scrolling animations on a touchscreen you’ll have to consider screen size. Indeed, long scrolling pages became popular as Web designers were adapting their websites for small mobile devices. And scrolling works quite well on a small screen like a smartphone or tablet but imagine scrolling for a long time on a touch wall display with your fingers. That might not be as intuitive or as comfortable.
If you’re clear on the pros and cons and decide to give it a go then we’ll show you how to do it in IntuiFace.
Scrolling Animations – How to create them in IntuiFace?
In order to create scroll animations, become familiar with the Scroll Collection. With the Scroll Collection you can place a large canvas behind a small window (aka "viewport"). Put any combination of assets and collections in the Scroll Collection canvas and then, at runtime, scroll the canvas in any direction behind the viewport, revealing different parts of the canvas through that viewport.
We have built a demo sample of the scroll collection you can download for free. It includes many cool scroll animation effects you can easily re-use or reproduce in IntuiFace. You can get the sample here.
For an overview check out this video:
Each example in this sample is thoroughly documented in this article.