Skip to content
This repository has been archived by the owner. It is now read-only.
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Framer Examples - Learn and Teach

A set of simple examples that you can work through with beginners. They all highlight a specific, common interaction or workflow. For more intermediate users, you can try to improve and expand these.

Included Examples

1. Chat View iMessage

Prototype of the iMessage iOS app with a design imported from Sketch. Contains a bunch of scrollable chat messages, a loading indicator and a clickable dictation icon.

Covers: ScrollComponent, Animation, Click Events, Utils.Delay

2. Chat View

Prototype of the Facebook Messenger app with a design imported from Sketch. Tap the thumb icon to insert the Facebook Like icon as a new message. The size of the icon depends on the duration of your tap.

Covers: ScrollComponent, Animation, Image Layers, Animation Origin, Touch Events, the “change:scale” event and Utils.Modulate.

3. Image Detail

Prototype of a scrollable set of imported images, where each one is clickable and brings the image to the front and center.

Covers: ScrollComponent, scroll.isMoving, Click Events, Copying and Destroying Layers, ignoreEvents and loops.

4. Lock Screen

Prototype of the iOS Lockscreen created only with imageLayers defined in Framer. You can swipe right to reveal the keypad. The wallpaper will fade out and blur accordingly.

Covers: PageComponent, imageLayers, snapToPage, the “change:x” event and Utils.modulate.

5. Page Indicators

Prototype of a bunch of images you can swipe between. All images are imported from Sketch. A page indicator visualizes the current and total amount of images.

Covers: PageComponent, Adding Pages, PageIndex and the “change:currentPage” event. (Sketch file not included in Shared Link)

6. View Transition

Prototype of the Facebook Groups app with a scrollable feed. Clicking “Write Post” brings up a new view, which you can Cancel to dismiss.

Covers: ScrollComponent, Dynamic Properties, Scroll Event, Click Event


Simple examples to teach or learn Framer



No releases published


You can’t perform that action at this time.