This tutorial walks through how to create the parallax effect.
Here is a sample, which you can copy and paste into your own account: https://app.atomic.io/d/Q2LI8dnDQN4c
Step 1: Add elements to the canvas
Put the elements in their starting position on the canvas (for example, by dragging and dropping elements into Atomic, or by using the Sketch plugin).
Tip: select an appropriate canvas size. With nothing selected on the canvas, set the canvas size in the top right of the properties panel.
Step 2: Make a scrolling container
Now we put all of the elements we would like to scroll into a scrolling container. You can leave any elements you would like to remain fixed throughout the animation out of the container.
To put the elements into a scrolling container, select the elements on the canvas, and then in the top menu select ‘Scroll’.
Scroll containers are set to scroll vertically by default. You can change this in the right hand properties panel, by selecting the container and setting it to horizontal, or both.
To ensure a container scrolls when previewed, resize it so that is smaller than the elements it contains. For a vertical scroll, drag the bottom of the container up.
See more on scrolling in Atomic: Scrolling
Step 3: Set up elements for the parallax
Within the scrolling container, select all of the elements that you would like to move at a different speed to the other elements during the scroll.
Now convert them into a component by pressing the ‘Component’ option at the top of the screen. In our example, we’ll name this component 'parallaxComponent'.
See more on components in Atomic: Component basics
Step 4: Add a finish state within the component
Now we have the elements in the component, it’s time to set up how much they move as you scroll the page.
Double click on the component to open it.
For convenience later on, rename your first page to something like ‘Start’.
Note: it is important now to make sure your layering is correct. If there are any elements that should be in front of others during the transition, make sure they are higher in the Layers panel now.
Still within the component, duplicate the start page, and name the second page to something like ‘Finish’. This finish page represents the end position of the elements in an animation, relative to everything else on the canvas.
How far the elements move from the start state of the component to the finish state is how much they will move during the scrolling range. For example, if you would like only a minor parallax effect, you may only move the elements up 50px from their starting state. This would mean that relative to the other components in the container, those elements will move up 50px more over the duration of the scroll.
Now it’s time to move the elements on the ‘Finish’ page, as you would like them to move relative to the other static content during the scroll. For example, if you would like some elements to move up faster than the other content as you scroll down, move those elements up on the finish page.
Navigate out of the component back to your prototype by pressing the Back button in the top-left corner.
Step 5: Locate where the scroll logic should take place
We need to decide how far (in pixels) into the scrolling of the page you would like the parallax effect to start and also stop. For example, you may like to start animating the component when scrolled 150px, and stop when scrolled 1000px.
There are a few ways you can decide these two values. Pick one that works best for you:
- Estimate, and then edit as necessary e.g. start after 100px, and finish after 1500px.
- Use a measuring tool to determine a more accurate starting and finishing position, for example, Page Ruler.
- Measure the exact starting and finishing positions. Add an action to the container to show the position of the scroll container on a click. Then open the console in preview mode, and scroll to where you would like to start and stop the parallax effect, recording the exact position. Click the container, and you will get the exact location.The script is:
console.log(scrollPos(["Page 1", "Container"]));
See more on using scrolling actions and events.
Step 6: Define the scroll action
Select the container, and in the properties panel on the right under ‘Actions’, select the plus icon to add an action.
Next, select ‘When scrolling within a range”.
Now use the two locations identified above in the ‘From’ and ‘To’ text inputs.
Next, select the component we prepared earlier, and set it to change to the ‘Finish’ page.
Finally, make the ‘Motion’ a ‘Custom transition’, and an ‘Easing’ of ‘Linear’.
The duration of the transition is irrelevant (as it is controlled by the speed the user scrolls), so you can leave it as the default value.
Step 7: Preview & test
Test things out in preview mode (by selecting ‘Preview’ down the bottom right, or keyboard shortcut Cmd + Enter).
To increase or decrease the parallax effect, adjust the position of the elements on the finish page of the component as necessary.
Step 8: Set up a return action (optional)
Once you have the parallax working as you would like, set up a return action for when a user is scrolling back up the document.
To create the opposite of the scroll down, use the exact opposite scroll locations. Or you can use new ones, if for example you would like the elements to move sooner or later.
Tip: If the ‘To’ location in the first scroll based action is larger than the actual depth of the scrolling container, then it will never finish (hit it’s destination finish state), and you will therefore not have to set up an action for the return journey (scroll back up).
If you would like there to be a scrollable area below the parallax effect, then you’ll need to set up a return action.
If you’d like to see an example of the parallax effect completed, copy this sample: