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.
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/
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/
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/
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/
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)
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