How We Work

How We Work - Sticky scroll steps for process

Turn your process into a pinned, scroll-driven story. How We Work is a Framer scroll section that stays fixed on screen while each step cross-fades in place image, title and description changing as the visitor scrolls.

Built for agencies, studios, freelancers and SaaS teams who need a How We Work, Our Process, Services or onboarding section that looks designed rather than templated.

WHAT YOU CONTROL Nothing is hard-coded. Every value is a Framer property control.

Steps — add, remove and reorder any number. Each carries its own title, description and image.

Overlays — 8 built-in vector graphics (circles, rings, dots, burst, triangles, grid, arcs, plus) or your own image. Colour, size, position, rotation, stroke, opacity, blend mode and motion are set per step.

Layout — image left or right, split width, section height, scroll length per step, padding, alignment, text width.

Color — accent, panel and text colours, plus image grading: tint, grayscale, brightness, contrast, saturation.

Type — extended font controls for label, title, body and counter.

Motion — scroll-driven or auto-play, fade length, cross-fade overlap, title slide, image zoom and parallax.

Navigation — step counter, progress bar and clickable dots.

Two optional sections above and below, each with its own show/hide toggle.

RESPONSIVE Split layout on desktop, stacked on mobile, with a breakpoint and type scale you choose.

NO DEPENDENCIES A single code component. No plugins, no external libraries. Drop it in, set width to Fill and height to Auto.

Tags: scroll section, sticky scroll, pinned scroll, scroll animation, scrollytelling, how we work, our process, process steps, step by step, workflow, timeline, cross fade, parallax, agency, studio, portfolio, saas, onboarding, services, dark section, storytelling, landing page, marketing site, steps section, framer component