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

Yanay Nir

Product Designer

,

Jan 6, 2022

Sticky position & animations.

Follow along with Product Designer Yanay Nir to create a unique effect as the user scrolls down the page with a combination of sticky position and animations. We use basic shapes to demonstrate the effect the combination creates, but you can get creative in how you apply it to your designs.

How to combine sticky position and animations in your designs.

Part 1: Set up your section.

1. Add a blank section.

2. Set the minimum height to 300vh. 

3. Apply a 3x3 grid. 

4. From the Add panel, drag in a Container.  

5. Add a container in each grid cell of the first row and stretch them to fill. 

6. Set the background of the middle container to black.

7. Set the backgrounds of the left and right containers to white.

8. From the Add panel under Decorative, drag a circle element to the left container.

9. Set the circle size to 60% width. 

10. Align it to the center and middle and set the fill color to black.

11. Add a triangle element to the middle container.

12 .Adjust the size and orientation the same way as above. Set the fill color to white. 

13 .Drag a square element into the right container. 

14. Set the square size to 54% width. 

15. Align the square to the center and middle and set the fill color to black. 

16. Copy and paste the container with the circle

17. Move it to the grid cell below it and stretch it to fill the cell. 

18. Invert the element colors so the container background is black and the circle is white. 

19. Select the circle and from the Inspector panel select Align to top.

20. Set a 50px margin from the top of the container. 

21. Copy and paste the container with the white circle and stretch it to fill the bottom left grid cell. 

22. Align the circle to the middle. 

23. Copy and paste the container with the triangle to the bottom middle grid cell.

24. Stretch it to fill and invert the container and triangle colors. 

25. Copy and paste the container with the square to the bottom right grid cell.

26. Stretch it and invert the container and square colors.

Part 2: Add sticky position and animations.

27. Select the container in the top middle grid cell that contains the triangle. From the Inspector panel set the Position type to Sticky.

28. Select the container in the bottom middle grid cell and click the breadcrumbs on the floating action bar.

29. Go to Arrange and select Bring to Front.

30. Select the white circle element in the left middle grid cell and set the position to sticky with a top offset of 50px.

31. Select the container in the top middle grid cell and select Animation from the floating action bar.

32. Set the Fade In animation.

33. Select the center left container that contains the top aligned circle.

34. Set the animation to Glide In.

35. Customize so the direction is from the left and set the distance to 300px.

36. Select the bottom right container that has the white square.

37. Set the Glide In animation.

38. Customize the direction to 90 degrees so it enters from the right.

39. Set the distance to 300px.

40. Select the bottom middle container that has the triangle and set the animation to Fade In with a delay of 1 second.

41. Select the bottom left container with the circle and animate it to Fade In with a 2 second delay.


Result: As you scroll down the page in Preview, the triangle sticks in the middle column until you reach the bottom while the shapes to the left and right animate into the viewport creating a fluid, engaging effect.

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

Yanay Nir

Product Designer

I'm an Editor X product designer. My team is responsible for all designed content including the Compositions, and almost everything suggested in the Add panel. We work closely with the Editor X product team, advising them on definitions and behaviors. I love design, spicy food, oldies music (like 60’s garage & psych) and the people I work with.

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
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
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.