A scroll-driven portfolio section built for Framer CMS Collection Lists. As visitors scroll down your page, a fixed card updates in real time switching the project title, category, thumbnail, and "View More" link to match whichever section is centred in the viewport. One component instance per collection item. No configuration beyond binding your CMS fields.
How to set it up or bind your CMS fields
Select the Pane component and use the + button next to each prop to bind your CMS fields:
1. Number - Your Number text field (e.g. 01)
2. Title - Your Title field
3. Category- Your Category field
4. Slug - Your Slug field
5. Thumbnail - Your Thumbnail Image field
6. Background Image - Your Background Image field
7. Order (bind CMS) - Use Number text field you added earlier.
Set your Collection Path, In the right panel, find Collection Path and type the slug of your collection page.
Examples:
Your collection page is called Set Collection Path to Projects - /projects/
Work - /work/
Case Studies - /case-studies/
Portfolio - /portfolio/
The path is always lowercase with hyphens, matching what Framer uses in the URL. Include the leading and trailing slash: /projects/ not just the collection name projects.
A scroll-driven portfolio section built for Framer CMS Collection Lists. As visitors scroll down your page, a fixed card updates in real time switching the project title, category, thumbnail, and "View More" link to match whichever section is centred in the viewport. One component instance per collection item. No configuration beyond binding your CMS fields.
How to set it up or bind your CMS fields
Select the Pane component and use the + button next to each prop to bind your CMS fields:
1. Number - Your Number text field (e.g. 01)
2. Title - Your Title field
3. Category- Your Category field
4. Slug - Your Slug field
5. Thumbnail - Your Thumbnail Image field
6. Background Image - Your Background Image field
7. Order (bind CMS) - Use Number text field you added earlier.
Set your Collection Path, In the right panel, find Collection Path and type the slug of your collection page.
Examples:
Your collection page is called Set Collection Path to Projects - /projects/
Work - /work/
Case Studies - /case-studies/
Portfolio - /portfolio/
The path is always lowercase with hyphens, matching what Framer uses in the URL. Include the leading and trailing slash: /projects/ not just the collection name projects.
