Enhancing asset flows with visual effects

Best Practices + Tips & tricks
1

Asset flow with visual effects

This demo showcases a technique to elevate the visual appeal of a scrolling asset flow by applying dynamic effects such as blur and opacity.

The objective is to ensure that the item in focus remains crisp and fully opaque, while adjacent items progressively become more blurred and transparent—creating a smooth depth effect that draws the viewer’s attention to the highlighted asset.

How It Works

The asset flow is powered by a data-driven approach using a database of images, which includes two additional columns for blur and opacity values. When the “is scrolled” trigger is activated, the index of the item in focus is stored in a counter variable, along with the indexes of the two preceding and two following items.

Excel bindings
Excel bindings607×229 63.8 KB

Each counter variable is linked to a set of actions that write the corresponding blur and opacity values into the Excel file, based on the item’s relative position to the one in focus. As outlined in a previous Intuiface Community article, applying these visual effects requires using a special binding syntax—not just simple numerical inputs.

Note: This effect is compatible with the Classic Player only.

Download the Intuiface demo (10MB)

1 Like
2

Thanks Paolo @tosolini for sharing this.

If I may, there might be a simpler option that also works on Player 8 that doesn’t involve Excel, so it would also work with an H-CMS data source.
Although, you won’t get the “gradual opacity / blur” for the close neighbors to the index in focus with that first version.

  • On your data template, set the image to your “non-focused” settings: blur = 15, opacity = 0.4
  • Add a trigger “Moved into focus” on your data template root (either the image itself, or the group that contains it => set your image blur to 0, opacity to 1
  • Add a trigger “Moved out of focus” on your data template root (either the image itself, or the group that contains it => set your image blur to 15, opacity to 0.4

Result below.

BlurOpacityAnimation

Let me know your thoughts on this approach.

1 Like
3

@seb I like your version better. It’s simpler and works on the new Player 8. The progressive blur / opacity is a nice to have, but not as important as HCMS and web compatibility. Thank you!

1 Like