Fixing Text on Scroll // Web Animation Course

⚡

✌️

FIXING TEXT ON SCROLL

Experiment with large typography and create interactive messages

Creating a fixation effect

Our goal is to apply fixation to two objects so that the first one will immediately "stick" to the middle of the page, while the second will stop at the point where it meets the first one. Like this:

Necessary settings

FIXING

Setting 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 object fixation relative to the selection option: Window Top / Window Center / Window Bottom.

DISTANCE

This is the distance in pixels that the object has to pass in fixed mode.

How to set it up

Setting up object parameters

1. Add a Zero Block from the Block Library to the page and head over to the block editor. Place two objects in the workspace, vertically, one after the other.

2. Set the objects to have the same fixation area. We set WINDOW CENTER as an example—both objects are 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 at the beginning. The size of each element will affect the parameters of the animation.

The size of the shapes is 100x100 px. The distance between the figures is 300px. Distance = Indent of the second object - Height of the first

Tip: If you don’t have a clear target size in mind, use whole or decimal values when setting the element sizes and spacing to make your calculations easier.

Setting up animation parameters

1. Let's start by setting the Trigger offset / Animation starting point.

The point is counted relative to our chosen area - Window center.

Start from the object located on top. That makes it easier to calculate starting points for the animation of the remaining objects. The top object has 0px set as the animation starting point. This means that it will stick exactly in the center of the screen.

The bottom object should stick when it touches the top object. This means that its animation starting point will be lower by the height of the first object. Let's set a 100px indent.

2. Set the distance.

This is the distance the object should pass while in fixed mode. Start setting up the animation from the bottom object, this way you'll be more comfortable calculating the "sticking" distance.

Square. If you look at the example again, you'll notice that the square doesn't cover any distance while in fixed mode—it merely remains fixed under the circle. This means we need to set the distance to 0px.

Circle. The circle in fixed mode covers the distance to reach the square. The fixation effect disappears after that, and both figures can be scrolled as usual.

Essentially, the circle has to get to the position of the square but it stops a bit higher to stick to it.

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