>In this video, I aim to show you how you can create stacking sections which remain in place as they expand. This was originally found on Spotify’s website and gave the inspiration for this video.

In this video, we will practice using the pinning feature, and creating animation nodes to control each tab within the pinned element. We will also use the CSS calc() method as you will see in the video.

We really hope you enjoy this one 🙌🏻

00:10 – Demo
01:15 – Page Setup
01:24 – Create Hero
03:17 – Create Pinned Element
03:44 – Create the First Tab
04:56 – Create the Title (Set Height)
06:47 – Add Content to Tab
10:22 – Open up Motion.page 🔥
10:45 – Set the Trigger Properties
12:40 – First Animation Node
13:10 – Add a Custom Property Animation
13:25 – Add in the Calc() function
17:55 – Add new Timeline for Last Section
21:16 – Our Result
22:10 – Outro