IntuiFace and the User Experience Trends of 2017 - Trend #4: Scrolling Animations

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.

Advantages:

• Enables creative storytelling and visuals
  
• Aids simple navigation
• Promotes interaction
• With infinite scrolling, entices users t stay longer
  
• Works well with touch controls

Disadvantages

• 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?

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 throughthat viewport.

We have built a demo sample of the scroll collection you can download. It includes many cool scroll animation effects you can easily re-use or reproduce in IntuiFace. You can get the sample

For an overview check out this video:

Each example in this sample is thoroughly documented in this article.