A phone mockup pins in place. As you scroll the page, the content INSIDE the phone's screen scrolls too — three different app screens flow past while a description on the left updates.
A phone mockup is pinned on the screen while you scroll. The phone's frame stays still, but its inner screen content scrolls vertically inside, showing a sequence of app screens (feed → search → profile, for example). The text panel next to the phone narrates what each screen does. The technique that makes "show, don't tell" work for mobile-app marketing.
Sticky-pinned phone frame inside a tall section. The phone has overflow: hidden on its screen. Inside the screen, a tall content column holds all the screens stacked vertically. As the user scrolls the outer page, JS calculates progress 0→1 and translates the inner content by translateY(progress × -contentHeight) — so the screen scrolls in sync. Crossing a section threshold also swaps the descriptive copy on the side. The phone stays still, the magic is purely the inner translate.
Scroll inside. The phone frame stays put; its inner screen scrolls through three app views.
No algorithm, no recommendations. Just the people you actually follow, in the order they posted.
Build a "phone with synced content" scroll animation. Outer scroll container with tall (2400px) inner section. Inside that section, a sticky pin (top:0 height:100vh) holding a two-column layout: TEXT on the LEFT (small uppercase eyebrow + display headline + paragraph) and the PHONE MOCKUP on the RIGHT. Phone: 280×580 with 12px bezel, 44px corner radius, notch oval at top, deep shadow. Inside the phone: .screen with overflow:hidden, padding-top:38px (status bar). Inside .screen: ONE long .content column containing 3 stacked app-screen sections (Feed / Search / Profile), each min-height:540px with their own gradient tints and mock cards. The .content is transformed via transform:translateY(calc(var(--p, 0) * -1400px)) where --p is a 0-1 scroll progress. Scroll listener: compute the tall section's scroll progress and set --p on the pin. As --p grows 0→1, the inner content slides UP — feeling exactly like swiping through three app screens inside a static phone. Also update the SIDE COPY based on which third of --p we're in — different num label / headline / description for each screen. The side copy uses opacity transitions for swap, the side text uses an italic accent on a keyword.