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

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

readme.md

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

http://share.framerjs.com/beip72l48igj/


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.

http://share.framerjs.com/dbvb7poiozux/


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.

http://share.framerjs.com/5ovfx0bflifz/


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.

http://share.framerjs.com/7y6wautoh90y/


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.

http://share.framerjs.com/nrtboo3dnh0s/ (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

http://share.framerjs.com/cinw13nmd706/

About

Simple examples to teach or learn Framer

Resources

Releases

No releases published

Languages

You can’t perform that action at this time.