#seattle framerjs

[framercode]

Module Sticky Headers

A module to enable sticky headers within Framer's Scroll Components.

Framer Module by @72mena

[framercode]

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, layer

colorInput.on Events.Blur, (value, layer) ->  print "Blur", value, layer

colorInput.on Events.Valid, (value, layer) ->  print "Valid", value, layer colorInput.on Events.Invalid, (value, layer) ->  print "Invalid", value, layer

colorInput.on Events.Match, (value, layer) ->  print "Match", value, layer

Framer Studio Source: Simple Example (outdated)

Framer Studio Source: Advanced Example (outdated)

Module Code by Jordan Dobson

[framercode]

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.

Framer Studio Source by Jordan Dobson

[framercode]

Tip How to Ignore Events During Scroll

Here’s a simple way to block your touch or click events from firing during scrolling on your ScrollComponents.

Inside your event use the following:

return if scroller.isDragging

If you want to block the event during any bounce or momentum animations use this instead:

return if scroller.isMoving

It’s that simple! Write any other code you want to use in the event below. See the demo for more.

Framer Studio Demo by Jordan Dobson

[framercode]

Module Device Pixel Ratio

This module assists you in building prototypes @ 1x and adjusts the prototype using the Device Pixel Ratio of any device for values where you use the dpr() function in the module.

This allows you to build fluid and adaptable prototypes in combination with the Screen.width & Screen.height values in Framer.

Here’s a quick usage example to get the same sizing on every device:

{dpr} = require ‘DevicePixelRatio’

rect = new Layer   width:  dpr 300   height: dpr 50

Framer Demo Project

Module Code by Jordan Dobson

[framercode]

Module Sprite Animation Layer

This module helps you do a sprite sheet animation. You just have to provide the image, a single sprite size, sprite step count and thespeed to step through the sprite.

Setup looks like this: 

sprite = new SpriteAnimationLayer   width: 70   height: 100   steps: 4   speed: 0.1   stepsImage: "images/sprite.png"

The methods you can call on the layer are:

sprite.play()

sprite.playOnce()

sprite.pause()

By default, calling .play() will continue to loop until you call .pause() on the sprite. If you only want to play once then use the .playOnce() method. The .pause() method will pause both of the .play() and .playOnce() methods.

Framer Studio Source: Simple Example

Framer Studio Source: Advanced Example

Module Code by Jordan Dobson

[framercode]

Module Pointer Helper Class

This module helps you normalize mouse and touch event coordinates to get either Screen or Offset x:y coordinates. 

People often run into the issue with difference between mouse and touch coordinates. This module will remove a lot of the frustration and WTF moments when dealing with cross platform scenarios in your code involving pointer x:y coordinates.

Here's two quick usage examples:

btn.on Events.Click, (event, layer) -> print Pointer.screen(event, layer)

btn.on Events.Click, (event, layer) -> print Pointer.offset(event, layer)

Instructions for adding it to your project are in the comments at the top of the module file.

Module Code by Jordan Dobson