Skip to content

A module to create scroll components with sticky headers in Framer.

Notifications You must be signed in to change notification settings

72/StickyHeaders-for-Framer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sticky headers for Framer

A Framer module to enable sticky headers within scroll components.

Install with Framer Modules

Examples

Installation

  1. Download StickyHeaders.coffee and put it in your modules folder.
  2. Add this line at the top of your document.
{StickyHeaders} = require "StickyHeaders"

How to use

Guide

Demo 1 and Demo 2 show a list of conference talks grouped by their starting time. The headers for each group are sticky headers.

1 - Import the module.

{StickyHeaders} = require "StickyHeaders"

2 - Create a Scroll Component as you normally do.

conferenceTalks = new ScrollComponent
	width: Screen.width
	height: Screen.height
	scrollHorizontal: false

3 - Create the headers. Set their parent to be the Scroll Component, and their name to be 'StickyHeader'.

header1 = new Layer
	y: 175, width: Screen.width, height: 140
	name: 'StickyHeader'
	parent: conferenceTalks.content

Since this is a Layer as any other, you can use it as a parent and nest inside anything you need.

4 - Enable the module for your scroll component.

StickyHeaders.enableFor(conferenceTalks)

Optional - You can pass a second parameter to set a custom top margin for the sticky headers. By default the value is 0.

StickyHeaders.enableFor(conferenceTalks, 100)

Planning your prototype

Make sure to plan ahead what you need to show in your prototype. My workflow is:

  • Design the view/list in Sketch or PS.
  • Export the list as a .png without the headers.
  • Export each header apart from the list.
  • Create the scroll component in Framer and then the layers for each header.

Medium - Unlocking ideas with Framer Studio - This module has changed a lot from my initial exploration described in this article, but the recommendations I shared still hold. Give it a read if you have a chance.

I hope this module saves you some time on your projects.

Contact

Twitter: @72mena

About

A module to create scroll components with sticky headers in Framer.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published