Product Launch Event - 20% Off for 500 Early Birds

Piotnet Scroll Animation

Application for any Bricks elements

The scrolling animation 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.

Demonstration

I am a heading

Tutorials

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

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

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

Step 2

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

CSS Property

There are multiple options.

  1. Opacity
  2. ScaleX
  3. ScaleY
  4. Scale
  5. SkewX
  6. SkewY
  7. Skew
  8. RotateX
  9. RotateY
  10. Rotate
  11. TranslateX
  12. TranslateY
  13. TranslateZ
  14. Blur
  15. Hue-rotate
  16. Brightness

In the first Animation item of this demo case, choose Opacity option.

From Value: Start point

Example: 0

To Value: End point after strolling up/down

Example: 1

From Trigger Position <Parameter setup for Y-axis>
  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.

From Trigger Position Custom(px) <Parameter setup for Y-axis>
To Trigger Position <Parameter setup for Y-axis>
  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.

To Trigger Position Custom(px) <Parameter setup for Y-axis>
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

Step 3

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:

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)
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 > Style Tab > Piotnet Scroll Animation > enable this feature > configure similarly as in tutorial above. 

Recommendation:

To diversify a form, you can refer to Piotnet Forms. It possibly fulfills your advanced and complicated setup requirements for building a form.

For instance: Apply Payment methods, multiple Marketing and other platform integrations, etc.