Round image of the author with a thin blue line around the image

Anastasia Logacheva

Technical Designer

,

Dec 20, 2020

Sticky scroll.

Technical designer Anastasia Logacheva shows you how to create this dynamic effect using sticky position and grid.

Part 1.

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.

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. Go to SCROLL in the Inspector panel

18. Beside Scroll effect, choose Sticky

19. Set the Top offset to 0px

20. Select the 2nd title

21. Go to SCROLL in the Inspector panel

22. Beside Scroll effect, choose Sticky

23. Set the Top offset to 180px

24. Select the 3rd title

25. Go to SCROLL in the Inspector panel

26. Beside Scroll effect, choose Sticky

27. Set the Top offset to 360px

28. Select the 4th title

29. Go to SCROLL in the Inspector panel

30. Beside Scroll effect, choose Sticky

31. Set the Top offset to 540px

Part 3.

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.

Round image of the author with a thin blue line around the image

Anastasia Logacheva

Technical Designer

I’m a technical designer for Editor X. I studied industrial design at college and have completed courses in graphic, web and UX design. I’m a keen Scuba diver and mother to a golden retriever named Shirley.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.