With Animation on scroll effects you can create lively layouts that can elevate your designs and the user experience for your customers. Through clever animation design you can highlight elements on your page that attract the attention of your customers which can be used for selling your products.

The effects created within Instant are triggered by layers that come into view through scrolling. You can define the delay, animation duration & animation easing globally. Additionally for each effect there are a range of settings that allow you to customize it fully to your liking.

Scroll animations can be added to any layer in Instant and will also apply to all the nested layers within the layer.

Select a layer that you want to add an animation effect to, then proceed by selecting the interactions tab in the right sidebar.

Proceed by clicking on the '+' button next to effects. a dropdown appears, select the option Scroll into view.

a Pop over panel appears where you can select the Animation.

Based on the selected animation preset, there is a range of settings you can define.

Offset

Offset allows you to define the offset of the scroll trigger in pixels. For example, when you have an offset of 100, the scroll animation will be triggered 100 pixels after the layer scrolled into the view.

Replay

With Replay enabled your animation will replay when scrolling back into view.

Direction

Through direction you can defines into what direction preset animates.

Distance

Distance defines the distance in pixels that the animation is covering for the Float & Slide presets.

Scale

With Scale you can set the starting size of the element for the Expand & Shrink presets.