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.
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.
Animations – When to use them?
determine whether you should use scrolling animations, consider the following advantages and drawbacks. According to
- Enables creative storytelling and
- Aids simple navigation
- Promotes interaction
- With infinite scrolling, entices users to
- 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
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
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
. 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
We have built a demo sample of the scroll collection you
. 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