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.

Speed Effects

Speed Effects allow you to define the scrolling speed of any given layer. 100% is the default—meaning the selected layer will scroll at the same speed as your other layers. If you set it to 110%, it will scroll faster. You can use this to create parallax and reveal effects. You can also set a negative percentage to make a layer scroll very slowly.

The position property allows you to customize the final position of the layer, relative to the top of the viewport. If you set this to “Current”, it will match the position as you have defined it on the Canvas. If you set it to “Scroll”, it will match the top of the viewport—but you can define a custom vertical offset if position is set to “Scroll”.

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.

Speed Effects

Speed Effects allow you to define the scrolling speed of any given layer. 100% is the default—meaning the selected layer will scroll at the same speed as your other layers. If you set it to 110%, it will scroll faster. You can use this to create parallax and reveal effects. You can also set a negative percentage to make a layer scroll very slowly.

The position property allows you to customize the final position of the layer, relative to the top of the viewport. If you set this to “Current”, it will match the position as you have defined it on the Canvas. If you set it to “Scroll”, it will match the top of the viewport—but you can define a custom vertical offset if position is set to “Scroll”.

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.

Speed Effects

Speed Effects allow you to define the scrolling speed of any given layer. 100% is the default—meaning the selected layer will scroll at the same speed as your other layers. If you set it to 110%, it will scroll faster. You can use this to create parallax and reveal effects. You can also set a negative percentage to make a layer scroll very slowly.

The position property allows you to customize the final position of the layer, relative to the top of the viewport. If you set this to “Current”, it will match the position as you have defined it on the Canvas. If you set it to “Scroll”, it will match the top of the viewport—but you can define a custom vertical offset if position is set to “Scroll”.