An exploration for viewing geospatial data on mobile and encourages cropping data to the extents the user needs.
Framer Code
A collection of FramerJS modules, code examples, snippets and tips.
Podcast
Hear about FramerJS & Design on the User Defenders podcast: The Little Details Can Make A Big Difference with Jordan Dobson
Jordan Dobson inspires us to never stop learning and be generous in sharing knowledge with others. He encourages us to craft prototypes in order to gain valuable insight early and often. He challenges designers to gain empathy for their developers by learning a bit about code. He also shows us how the little details can make a big difference.
Module Sticky Headers
A module to enable sticky headers within Framer’s Scroll Components.
Module ViewStack
This module helps you create and control views that stack on top of each other. You can swipe to dismiss them, or fan out the stack and select one to bring forward.
Module RemoteLayer
The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes. You can choose your preferred styling, alignment, animation and button highlight color. All buttons (and swipes on the touchpad) can be configured to perform your own supplied actions.
Module Distribute Layers
A package to help you position multiple Framer layers with ease. It works just like the “distribute” buttons available in most design apps. The examples and documentation are quite excellent.
Module Pair
Enable drag and drop detection between two layers or between a layer and your mouse or finger.
APP Framed for Windows
Framed is a minimal web browser for designers and developers prototyping fullscreen experiences on Windows devices with HTML & Javascript. On phones, prototype native app experiences by going fullscreen to remove all distracting browser chrome. On PCs, hide the titlebar to design immersive, full-bleed desktop windows.
Has support for mobile devices, PC, Xbox and Windows Holographic.
Module ValueLayer
A simple subclass for rendering and animating formatted numbers in Framer.
Slow Motion Toggle
This code snippet adds an invisible button to your prototype that toggles slow motion on and off. It’s very handy for devs when building complex animations or if you just need to get a good look at all the moving pieces.
Paper Menu
This is an awesome paper-style menu. Enjoy!
Module PerspectiveView Layer
Toggle perspective view in your prototypes. You can also rotate the view by panning left or right.
Example: http://share.framerjs.com/5aejinxohjiz/
Github: https://github.com/mrrocks/perspective-view
By @mrrocks
Module Default Animation Settings & Viewer
This module helps you calibrate animation in your Framer project.
- Copy motionSlider.coffee into the modules directory of your project
- Add these 2 lines at the top of your Framer file
motionModule = require “motionSlider”
motionModule.motionSlider_function()
- Long press 3 seconds on the screen. This allows you to calibrate Framer.Defaults.animation in your project.
Module InputField Class
UPDATE: This module has been improved and updated. Use the link below for examples of usage, new properties and an improved event system.
Updated Framer Studio Source & Module: Simple & Advanced Example
This module allows you to easily add text & date inputs to your prototypes. You can also easily listen for focus, blur, Input, valid, invalid and match events by using the custom events added to the InputField class.
Valid input types with keyboard support are: text, email, number, number-only, url, tel, password, search, time, month, date and datetime-local… file will be coming in the next few months.
You’re also able to set the placeHolder, placeHolderColor and placeHolderFocus values, a default value, maxLength, fontSize, fontWeight, fontFamily, indent, lineHeight, maxLength, match (array), pattern (regex pattern), autoCapitalize, autoComplete, autoCorrect, and autoCapitalize properties.
Here’s a quick usage example:
myInput = new InputField
width: Screen.width
height: 132
color: “black”
backgroundColor: “#fff”
placeHolder: “Search…”myInput.on Events.Input, (value, layer) ->
print “INPUT”, value, layer, @isEmpty
Here’s a more advanced usage example:
colorInput = new InputField
name: "colorInput”
type: “text”
width: Screen.width
height: 132
x: 0
y: 0
color: “black”
backgroundColor: “#fff”
indent: 48
fontSize: 48
fontWeight: 600
fontFamily: “Georgia, serif”
placeHolder: “Enter Hexadecimal Color”
placeHolderFocus: “#_ _ _ _ _ _”
placeHolderColor: “silver”
autoCapitalize: false
autoComplete: false
autoCorrect: false
maxLength: 7
pattern: “^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$”
match: [“orange”, “Orange”, “red”, “Red”, “blue”, “Blue”]
value: “”colorInput.on Events.Input, (value, layer) ->
print “Input”, value, layer, @.isEmpty
colorInput.on Events.Focus, (value, layer) ->
print “Focus”, value, layercolorInput.on Events.Blur, (value, layer) ->
print “Blur”, value, layercolorInput.on Events.Valid, (value, layer) ->
print “Valid”, value, layer
colorInput.on Events.Invalid, (value, layer) ->
print “Invalid”, value, layercolorInput.on Events.Match, (value, layer) ->
print “Match”, value, layer
Framer Studio Source: Simple Example (outdated)
Framer Studio Source: Advanced Example (outdated)
INBOX Scroll + Swipe + More
Here’s an example from Framer JS Seattle Meetup 04!
Jordan Dobson mentored the advanced and intermediate group talking about code structure, using / adding modules, creating classes, drawing with CSS, dealing with varied pixel densities, directionLock, collecting sublayers as properties of a superLayer and using the new custom property on layers.
The features in this demo include:
- Swipe left only
- Blocking right swipe
- Cell removal from list
- Click status bar to scroll to top
- Shy navigation bar
- Adding a confirm for frameless in case you don’t have it
- Mousedown cursor state change via cursor module
- And a few others… see if you can find them.