Scroll FX

Blocs comes with various animation features, however, Scroll FX are probably the most captivating as they allow you to animate objects on screen and have those animations synced with the scrolling of a page, this style of animation effect is commonly referred to as parallax.

Applying Scroll FX

Applying parallax scroll effects is incredibly easy in Blocs. When an element is selected on the design Canvas, various, easy to use controls that let you set key animation values for the selected element are available within the sidebar inspector.

In and Out Events

Scroll FX are broken into two main option sets, Scroll In and Scroll Out. The Scroll In options control how an element is animated as the page is scrolled down and the element comes into view. The Scroll Out options control how an element is animated as the page is scrolled up and the element goes out of view.

Continuous Animation

Enabling the continuous option prevents the minor animation pause that occurs when the element reaches its original position on the screen. This allows users to create fluid, continuous parallax animations. In order to enable the continuous option, the selected object must have both scroll in and out events applied.

Beginners Tip

Remember, scroll-in scroll FX will rarely be seen when they are applied to content above the fold (top of a site) as it is rarely scrolled in and generally only ever scrolled out of view.

Updated on 21st November 2020

Was this article helpful?

Related Articles