Parallax scrolling effect is a way to create the appearance of depth on the web. By moving elements at different speeds and in different directions, you can create an illusion of perspective, and give a 3D feel while scrolling through the page.

To achieve the sense of depth with parallax — think about depth perception principles. Closer objects have a larger Parallax than more distant objects. So they will appear to move more quickly than ones that are further away.

1. Select an image in your XD or Figma file (JPG or PNG).

Click ‘Parallax’ in the Anima plugin.

2. Set the animation properties and click ‘Preview in Browser to see the parallax effect at work.

Here are all of the animations properties you have for creating a Parallax with Anima in Adobe XD and Figma.

1. Direction — The direction of the parallax effect when scrolling down

2. Scale — The image is scaled to apply a parallax effect. Meaning, the higher the scale is set, the more visible the parallax effect will be

3. Delay — When a delay is set, the translation of the image will continue during that delay when the user stops scrolling

4. Easing — The transition of the animation. Choose between ‘Ease’, ‘Ease in’, ‘Ease out’, ‘Ease in-out’, ‘Linear’, or ‘None’

5. Overflow — The image will translate out of its natural flow and may overlap with other content

❗️We use a library called SimpleParallax.js. It is a Vanilla JS library that adds Parallax animations to any image. Furthermore, the Parallax effect applies directly to image tags, so there is no need to use background images. In the future, we will easily add other libraries for more capabilities👌.

Get involved in our Anima Community Forum!