framer / Framerteachexamples
Programming Languages
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