Prototype a parallax scrolling effect

Bradley Simpson
bradley@atomic.io

parallaxCollectivePreview9.gif

Including parallax effects in your design is a double edge sword. The effect — where images on the canvas move at different speeds, creating an illusion of depth — can be powerful. Yet prototyping it can be so difficult that you end up passing a prototype (or even static images!) over to the engineers that has not undergone the depth of experimentation and testing that you’d prefer.

A parallax effect is relatively easy to achieve in Atomic.

Follow this tutorial to find out how

The effect is achieved using a combination of component states, and our inbuilt scrolling functionality, that gives you power over the animation of some elements, based on the scrolling position of the page.

Our tutorial includes a sample that you can copy into your own project to see exactly how it was achieved.

Unlike almost any other tool, Atomic also lets you include other complex design problems that needs to be tested — like personalising the prototype to a user using variables, using real data, or applying conditional logic through the flow.


Have ideas or questions about making other parallax effects in Atomic? Join the conversation in our community.

New to Atomic? It’s free to prototype in Atomic, easy to get started and insanely powerful!

Posted 6 June 2018

Advanced interactive design & prototyping.