Scroll Effects

Adding parallax & appear effects.

Overview

You can add Scroll Effects to any layer and component (except for Graphics, at the moment). To add any effect, select a layer, then click on the “Effects” row and pick an effect to add. Today, we support two types of effects: Speed and Appear.

Speed allows you to define the scrolling speed of a layer, which allows to you to design parallax effects. Appear allows you to animate any layer as you scroll past it (as it enters the viewport). The appear effect works for layers and components. If you’re using it with components, it allows you to animate between two Variants—one variant for when the component is hidden (off-screen) and the other to animate to when it’s visible (on-screen).

Appear Effects

The Appear effect allows you to animate layers as you scroll past them. See a short summary of the available properties below.

• Off Screen. Clicking on this brings you into “Edit Mode”—allowing you to define what the initial state of the layer should be. This is the “from” state, where the layer as its shown on the canvas represents the “to” state. A common effect here is setting opacity to 0 with an y-offset.
• Start From. This defines when the animation starts. For example, let’s say we have a section that is 200 pixels high, and we want it appear as you scroll past it. By default, it will start the animation when half of the section is in view (so 100 pixels). You can also decide to trigger the animation as soon as possible (the top of the section), or later (the bottom of the section, so 200 pixels).
• Animate. If set to Once, your animation will only ever trigger once. If set to Reset, it will trigger every time you scroll past it (so also when you scroll back up).
• Transition. This allows you to override the animation options. Use a spring curve or an easing curve. You can also add a delay here to design staggered transitions (for example, you could give your heading a delay of 0.1, your paragraph a delay of 0.2 and your asset a delay of 0.3).

If you click on Effect, you can design the actual effect. There are a few properties available: opacity, scale, offset X and offset Y. More properties will be available in the near future. Once in this edit mode, any changes you make to these properties will also be visible on the canvas, so you can preview your initial state. Once done, simply return and dismiss the popover.