Beautiful Scroll Animation for Bricks Websites

The Scroll Animation (Scroll Animated) feature is where one or multiple elements get animated while the visitor scrolls up or down the page. The animations can be of any kind: moving elements, fading effects, changes in color, shape, or size, or anything else that comes to your mind.

Websites that display animations on scroll grab the user’s attention. This increases your site engagement and the likelihood of customers buying from you.

Make sure that you already researched basic animation design knowledge.

To easily illustrate, we will guide a simple setup versus a heading element.

Put a Heading element inside a Container (A container is mandatory)

Edit that Heading element > Style Tab > Piotnet Scroll Animations > enable this feature.

Click on ADD ANIMATION to customize the first Animation item styles.

• Opacity
• ScaleX
• ScaleY
• Scale
• SkewX
• SkewY
• Skew
• RotateX
• RotateY
• Rotate
• TranslateX
• TranslateY
• TranslateZ
• Blur
• Hue-rotate
• Brightness

In the first Animation item of this demo case, choose the “Opacity” option. → 2 extra value boxes apprear.

• From Value: Start point, Example: 0
• To Value: End point after strolling up/down, Example: 1

From Trigger Position

1. The element will appear at the bottom of the screen
2. The element will disappear at the top of the screen
3. The element will be centered vertically on the screen
4. Custom.

Choose “Custom” in this demo case → Extra “From Trigger Position Custom(px)” value box appears.

To Trigger Position

1. The element will appear at the bottom of the screen
2. The element will disappear at the top of the screen
3. The element will be centered vertically on the screen
4. Custom.

Choose Custom in this demo case. → An extra “To Trigger Position Custom(px)” value box appears.

Easing functions specify the rate of change of a parameter over time

You can refer to these sources:

1. Easing Functions
2. https://easings.net/en

Similar to Step 2, Click on ADD ANIMATION to customize the second Animation item styles.

In CSS property: choose “translateX”

Set up the parameters as below:

To inspect the possibility of Scroll Animation, you can use the Animation Preview on the right of the header’s Bricks Editor Panel.

• From (Start Point)

• To (End Point after strolling up/down)

Bricks Icon Element has a special structure. If you apply this feature for it, please put it inside a Div

Then edit that covered Div instead of direct Icon element > Style Tab > Piotnet Scroll Animation > enable this feature > configure similarly as in the tutorial above.