Summer 2016
When I worked at Adobe, my office neighbors were the makers of the Behance app. Although I wasn’t officially involved in their projects, we’d often chat about design and development choices. During a bit of downtime in my other projects, I decided to work with them to rework the section of the app showing which projects in a profile had been featured, to add a bit of polish and whimsy to the interface.
This is an in-depth look at the animation and polish that went into that one interaction.
I started from this simple animation mockup from Rich, the Behance app’s designer. Ribbons scroll horizontally, and an image in the middle cross-fades to show the project corresponding with the middle ribbon, as the ribbon snaps into place hanging off the top left edge of the project cover.
While this gave a starting point, it left a number of things undefined - how should the ribbons track your finger from left to right? What does it look like if you scroll very quickly or very slowly?
The first problem to solve was how the ribbons would move as the user scrolls sideways; To keep the direct-manipulation feel that is so essential with scrolling motion, the non-active ribbons track the user’s finger exactly. That left the question of how the active ribbon should scroll across project cover image.
The ribbon couldn’t just blindly follow a curve up to the top of the cover image and then back down, because the movement was very jerky if the ribbons were scrolling quickly. Therefore, I decided that the ribbon would only snap up into place at the top of the project cover if the ribbons were moving sufficiently slowly, and would otherwise move just horizontally.
If the ribbons just moved proportionally faster from right to left as the user scrolled, the motion also looked awkward while scrolling incredibly slowly, leaving states where no ribbon was selected, and it was unclear what project cover image should be shown. Therefore, I developed a “snapping” animation that replaced the active ribbon with the ribbon after it anytime a scroll position threshold had been crossed.
This animation is also used when the next or previous ribbon was tapped.
To add a bit more liveliness, I wanted to see if I could get the ribbons to feel more cloth-like. My first test was to add a simple, custom-built physics simulation, where the top of the ribbon was fixed in place, and the lower points on the cloth would be connected to the points above using springs. Unfortunately the result was much too floppy, giving a rubbery wet-noodle feel, rather than the stiff fabric I was hoping for.
To make the fabric feel stiffer, I added diagonal springs, to make the material more resistant to sideways tension and compression, making it spring back into shape more quickly, and getting me closer to the feel I was looking for.
A simple wireframe is overlaid to show the springs in the physics simulation. Springs here are colored red while in tension, and green while under compression.
While a physics-based cloth simulation created a cloth feel that worked nicely within a wide range of speed, acceleration, and deceleration, sometimes it was not as pronounced as I would have liked. Particularly, when the previous ribbon was selected, it had very little horizontal distance to travel, and the cloth movement was not particularly noticeable.
While a physics-based cloth simulation created a cloth feel that worked nicely within a wide range of speed, acceleration, and deceleration, sometimes it was not as pronounced as I would have liked. Particularly, when the previous ribbon was selected, it had very little horizontal distance to travel, and the cloth movement was not particularly noticeable.
To compensate for this, I added a multiplier to the acceleration forces applied to the ribbon in this one particular animation, to give a slightly more pronounced cloth feel as the ribbon falls into place.
While most of the individual details of the interaction and animation dont jump out at you as you scroll through the ribbons, they do contribute to a livelier, more interesting interaction.
Evolution of the animation from start to finish.