Messenger Icon

Beautiful Scroll Animation for Bricks Websites

Table of Contents

Application for any Bricks elements

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.

Scroll Animation Example

I am a heading

Detailed Tutorials to scroll animation websites

Make sure that you already researched basic animation design knowledge.

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

Step 1: Add a Cover Container and trigger feature

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

Scroll animation with Piotnet Bricks Addons 1

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

Scroll animation with Piotnet Bricks Addons 2

Step 2: Configure First Animation

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

Scroll animation with Piotnet Bricks Addons 3

CSS Property: There are multiple options.

  • 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.

Scroll animation with Piotnet Bricks Addons 4
Choose "Opacity" in this demo
  • 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.

Scroll animation with Piotnet Bricks Addons 7

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.
Scroll animation with Piotnet Bricks Addons 8

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

Scroll animation with Piotnet Bricks Addons 9

Easing

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
Scroll animation with Piotnet Bricks Addons 10

Step 3: Add more Animation

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

In CSS property: choose “translateX”

Scroll animation with Piotnet Bricks Addons 11

Set up the parameters as below:

Scroll animation with Piotnet Bricks Addons 12

Step 4: Animation Preview

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)
Scroll animation with Piotnet Bricks Addons 13
  • To (End Point after strolling up/down)

*A note for the Icon element

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. 

Related Features

Recommendation:

To diversify query or apply filters, you can refer to Piotnet Grid. It possibly fulfills your advanced Grid Layout or combine Facets to filter Bricks Query Loop.