Combining 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.
What do you think about the course so far?
Thank you for your feedback!
Explore more topics
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.
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.
EXPLORE MORE TUTORIALS
TUTORIAL
Creating a full page sticky scroll effect
TUTORIAL
Position type
.png)
TUTORIAL
Placing sticky scrolling elements over a video