Build a scroll-position effect

Blocksify Pro Scroll Position effects connect a block’s movement and appearance to the visitor’s progress down the page.

Before you start: Open a page with a tall Section and a block that remains visible long enough to test while scrolling.

Add the Scroll Position trigger

1. Go to Pages → All Pages and edit the Northstar Studio page with the tall Section.
2. Select the block you want to animate, such as a Container holding a property heading and short introduction.
3. Open Interactions in the block settings sidebar.
4. Under Block Animation, click Add Animation Trigger, then choose Scroll Position. A new row opens with Start, End, Smooth, and Scroll Properties controls.

The editor adds Vertical Move and Opacity with starting values of 0 → -80px and 0 → 1. Start is 0, End is 100, Smooth is On, and the Desktop, Tablet, and Mobile Trigger on buttons are enabled.

Choose the Scroll Properties

1. In Pages → All Pages → Edit, select the same block and reopen Interactions → Scroll Position.
2. Open Vertical Move and set From to 40 and To to 0. The block will rise 40 pixels into its resting position.
3. Open Opacity and keep From at 0 and To at 1. The block will change from transparent to fully opaque.
4. Click Add Property to add Rotate, Scale, or Blur only when the composition benefits from another change.

Property	Accepted values
Vertical Move	Numbers in pixels, with no fixed minimum or maximum and 5px steps. Positive values move down; negative values move up.
Opacity	0 to 1 in steps of 0.1. Zero is transparent and one is fully opaque.
Rotate	Numbers in degrees, with no fixed minimum or maximum and 1-degree steps. Negative and positive values rotate in opposite directions.
Scale	Numbers with no fixed minimum or maximum and steps of 0.05. One is the original size; values below or above one shrink or enlarge it.
Blur	Numbers in pixels, with no fixed minimum or maximum and 1px steps. Use non-negative values; zero is sharp.

Each property changes steadily from its From value to its To value. For a restrained property introduction, Vertical Move plus Opacity is usually enough.

Set the Start, End, and Smooth controls

1. In Pages → All Pages → Edit, select the block and open Interactions → Scroll Position.
2. Set Start to 15 and End to 70. Both fields accept 0 to 100 in 5-percent steps.
3. Leave Smooth set to On. It is enabled by default and softens changes between nearby scroll positions.

Start and End define the part of the block’s journey through the viewport that drives the effect. Before Start it stays at the From values; after End it stays at the To values.

Limit the effect to Desktop and test it

1. In Pages → All Pages → Edit, select the block and open Interactions → Scroll Position.
2. Under Trigger on, leave Desktop enabled and turn off Tablet and Mobile. The effect will run only at desktop widths.
3. Click Update or Publish, then open the page in a new browser tab.
4. Scroll down until the block enters the viewport. It should rise 40 pixels and fade from transparent to fully visible between the chosen Start and End positions.
5. Resize below desktop width and reload. The block should remain in its normal visible state without the scroll effect.

For the other Pro choices, see Interaction triggers. For the free entrance controls, return to Block animations and interactions.

Related articles

• Interaction triggers
• Visibility conditions overview
• Block animations and interactions
• Responsive and hover editing
• Section block