⚡
✌️
Creating a fixation effect
Our goal is to apply fixation to two objects so that the first one immediately sticks to the middle of the page, while the second one freezes the moment it touches the first. Something like this:
1
Settings Overview
FIXING
This sets the object's fixation area. This refers to the area of the screen (top, center, or bottom) relative to which the fixation effect starts. Note that the shapes in the example are fixed in the center of the screen.
TRIGGER OFFSET
This is the starting point of the object's fixation relative to the selected setting: Window Top / Window Center / Window Bottom.
DISTANCE
This refers to the distance in pixels that the object has to pass in a fixed mode.
How to Create the Effect
1
Setting up element parameters
1. Add a Zero Block to the page from the block library and head over to the block settings. Place 2 objects in the workspace, vertically, one after the other.
2. Set the objects to have the same fixation area — WINDOW CENTER in our case. Both objects will remain fixed in the middle of the screen.
3. It's better to choose the final size of all the elements and the distance between them in one go. The size of each element will affect the animation parameters.
The size of the shapes is 100x100 px. The distance between them is 300px. Distance = Indent of the second object - Height of the first
Tip: If you don't have a clear size target, use whole or decimal values when entering an element's size and spacing to simplify your calculations.
2
Setting up animation parameters
1. Let's start by setting the Trigger offset / Animation start point.
The point is counted relative to the chosen area, Window Center.
Start from the top object as this will make it easier to calculate the starting points for the animation of the remaining shapes. Its starting point is 0px, which means the first object will stick exactly in the center of the screen.
The bottom object should freeze when it touches the top object. This means that its animation starting point will be lower by exactly the height of the first object. Let's set the indent here to 100px.
The point is counted relative to the chosen area, Window Center.
Start from the top object as this will make it easier to calculate the starting points for the animation of the remaining shapes. Its starting point is 0px, which means the first object will stick exactly in the center of the screen.
The bottom object should freeze when it touches the top object. This means that its animation starting point will be lower by exactly the height of the first object. Let's set the indent here to 100px.
2. Let's set the Distance.
This is the distance the object should pass in fixed mode. Adjust the animation settings starting from the bottom object. That will make it easier to calculate the "sticking" distance.
This is the distance the object should pass in fixed mode. Adjust the animation settings starting from the bottom object. That will make it easier to calculate the "sticking" distance.
Square. If you take another look at the example, you'll notice that the square doesn't cover any distance in fixed mode—it remains frozen under the circle. That means that we need to set the distance to 0px.
Circle. The circle covers the distance to the square in fixed mode. The fixation effect disappears after that and both shapes continue scrolling as usual.
Essentially, the circle has to get to the position of the square and stop higher to freeze next to it.
That means 400px - 100px (height of the square) = 300px
Essentially, the circle has to get to the position of the square and stop higher to freeze next to it.
That means 400px - 100px (height of the square) = 300px
Save the settings and publish the page. The changes will be visible in preview mode or after the page is published.
Was this guide helpful to understand how the sticky effect works?
