Creating a sticky text scroll effect

Part 1: Create the grid

1. Apply a 1x2 grid to the main section (1 column, 2 rows)

2. Select Adjust Grid then Edit Grid

3. Set the top Row Height to min/max, Min to 3000 px and Max to max-content

4. Set the bottom Row Height to min/max, Min to 100 vh and Max to max-content

Part 2: Sticky Position

1. Drag in a title from the Add panel to the top grid cell

2. Open the Inspector panel

3. Change the Width to 100%

4. Go to Edit Text in the floating action bar and align the text line to the center

5. Change the font size to 200

6. Duplicate the text 3 times, so you have 4 rows of text

7. Align each line of text to the center using the alignment tools in the top of the Inspector panel

8. Select the 1st title and go to the Inspector panel

9. Set the Top Margin to 0px

10. Select the 2nd title

11. Set the Top Margin to 800px

12. Select the 3rd title

13. Set the Top Margin to 1600px

14. Select the 4th title

15. Set the Top Margin to 2400px

16. Select the 1st title again

17.  Open the Inspector panel

18. Set Position Type to Sticky

19. Set the Top offset to 0px

20. Select the 2nd title

21. Open the Inspector panel

22. Set Position Type to Sticky

23. Set the Top offset to 180px

24. Select the 3rd title

25. Open the Inspector panel

26. Set Position Type to Sticky

27. Set the Top offset to 360px

28. Select the 4th title

29. Open the Inspector panel

30. Set Position Type to Sticky

31. Set the Top offset to 540px

Part 3: Set to full height

1. Drag in a container to the bottom grid cell

2. Open the Inspector panel

3. Set the Width of the container to 100 vw, the Height to 100%

4. Align it to the Center and to the Middle

5. Design it as you want

Result: In preview, as you scroll, the text lines will gather one under the other until the container scrolls up.

Note: Make sure that the container is above the text lines in the Layers panel.