# Animate on scroll

Animate on scroll feature allows elements to appear as you scroll (navigate) down the page.

# Type

Type defines the choice of animation you want to appear as you scroll, such as fade, scale, puff, flicker.

1. Select a block
2. Open the block inspector
3. Navigate to the advanced tab
4. Open the Animate on scroll panel
5. Find the Type property
6. Click on the appropriate type options (fade, scale, puff, flicker)​​.

# Start Anchor

Start Anchor defines the user viewport position which triggers the animation, such as top, centre, bottom.

1. Select a block
2. Open the block inspector
3. Navigate to the advanced tab
4. Open the Animate on scroll panel
5. Find the Start Anchor property
6. Click on the appropriate start anchor options (top top, center top, centre centre, bottom top etc.)​​.

# Easing

Easing lets you apply different kinds of easing timing to the animation when triggered into view, such as linear (default), ease-in, ease-out, etc.

1. Select a block
2. Open the block inspector
3. Navigate to the advanced tab
4. Open the Animate on scroll panel
5. Find the Easing property
6. Click on the appropriate easing options (ease-in, ease-out, centrecentre, bottomtop etc.)​​.

# Duration

Duration lets you set how long the animation lasts, with values from 0 to 3000, in steps of 50ms

1. Select a block
2. Open the block inspector
3. Navigate to the advanced tab
4. Open the Animate on scroll panel
5. Find the Duration property
6. Click on the appropriate duration options (from 0 to 3000, in steps of 50ms)​​.

# Delay

Delay lets you set the time before the animation appears, with values from 0 to 3000, in steps of 50ms

1. Select a block
2. Open the block inspector
3. Navigate to the advanced tab
4. Open the Animate on scroll panel
5. Find the Delay property
6. Click on the appropriate delay options (from 0 to 3000, in steps of 50ms)​​.

# Animate Once

Animate Once lets you set whether the animation should happen only once - while scrolling down

1. Select a block
2. Open the block inspector
3. Navigate to the advanced tab
4. Open the Animate on scroll panel
5. Find the Animate Once property
6. Slide to select if the animation should happen only once.