├── .gitignore
├── README.md
├── demo.gif
├── example.framer
├── app.coffee
└── modules
│ └── shakeEvent.coffee
├── fm-badge@2x.png
├── module.json
├── shakeEvent.coffee
├── snippet.coffee
└── thumb@2x.png
/.gitignore:
--------------------------------------------------------------------------------
1 | *.framer/*
2 | !*.framer/modules
3 | !*.framer/*.coffee
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## ShakeEvent Module for FramerJS
2 |
3 |
4 |
5 |
6 | #### DEMO: (Open in your phone)
7 | 👉
8 |
9 | #### Usage:
10 | Place `shakeEvent.coffee` into the `modules` folder of your project.
11 |
12 | ``` coffeescript
13 | ShakeEvent = require "shakeEvent"
14 | # ...
15 | ShakeEvent.onShake = ()->
16 | alert "shaked!"
17 | ```
18 |
19 | #### Options:
20 |
21 | ``` coffeescript
22 | ShakeEvent.throttleInterval = 1 # Default 1 (secend(s))
23 | ShakeEvent.sensitivity = 20 # Default 20 (a lower number is more sensitivity)
24 | ```
25 |
26 |
27 |
--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RayPS/Framer-Module-ShakeEvent/03a2e661ddc5de98963404cbd49f77d79866ff0e/demo.gif
--------------------------------------------------------------------------------
/example.framer/app.coffee:
--------------------------------------------------------------------------------
1 | ShakeEvent = require "shakeEvent"
2 |
3 | Framer.Defaults.Animation =
4 | time: 0.25, curve: "spring(250, 10, 0)"
5 |
6 | BG = new BackgroundLayer
7 |
8 | myLayer = new Layer
9 | x: 100, y: 100, width: 300, height: 300
10 | backgroundColor: "#28affa"
11 | borderRadius: 150
12 | myLayer.center()
13 | myLayer.states.add
14 | one: rotation: 45, borderRadius: 0
15 | two: rotation: 90, scale: 2
16 |
17 | ShakeEvent.throttleInterval = 1
18 | ShakeEvent.sensitivity = 20
19 |
20 | ShakeEvent.onShake = ()->
21 | myLayer.states.next()
--------------------------------------------------------------------------------
/example.framer/modules/shakeEvent.coffee:
--------------------------------------------------------------------------------
1 | # https://github.com/RayPS/Framer-Module-ShakeEvent
2 |
3 | throttleInterval = exports.throttleInterval ?= 1
4 | handler = Utils.throttle throttleInterval, ->
5 | exports.onShake()
6 |
7 | # http://stackoverflow.com/questions/711536
8 | if typeof window.DeviceMotionEvent != 'undefined'
9 |
10 | # Position variables
11 | x1 = 0
12 | y1 = 0
13 | z1 = 0
14 | x2 = 0
15 | y2 = 0
16 | z2 = 0
17 |
18 | # Listen to motion events and update the position
19 | window.addEventListener 'devicemotion', ((e) ->
20 | x1 = e.accelerationIncludingGravity.x
21 | y1 = e.accelerationIncludingGravity.y
22 | z1 = e.accelerationIncludingGravity.z
23 | return
24 | ), false
25 |
26 | # Periodically check the position and fire
27 | # if the change is greater than the sensitivity
28 | setInterval (->
29 |
30 | # Shake sensitivity (a lower number is more)
31 | sensitivity = exports.sensitivity ?= 20
32 | change = Math.abs(x1 - x2 + y1 - y2 + z1 - z2)
33 | if change > sensitivity
34 | handler()
35 |
36 | # Update new position
37 | x2 = x1
38 | y2 = y1
39 | z2 = z1
40 | return
41 | ), 150
--------------------------------------------------------------------------------
/fm-badge@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RayPS/Framer-Module-ShakeEvent/03a2e661ddc5de98963404cbd49f77d79866ff0e/fm-badge@2x.png
--------------------------------------------------------------------------------
/module.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ShakeEvent",
3 | "description": "Shake event for your prototype",
4 | "author": "rayps",
5 |
6 | "require": "ShakeEvent = require \"shakeEvent\"",
7 | "install": "shakeEvent.coffee",
8 | "example": "snippet.coffee",
9 |
10 | "thumb": "thumb@2x.png"
11 | }
--------------------------------------------------------------------------------
/shakeEvent.coffee:
--------------------------------------------------------------------------------
1 | # https://github.com/RayPS/Framer-Module-ShakeEvent
2 |
3 | throttleInterval = exports.throttleInterval ?= 1
4 | handler = Utils.throttle throttleInterval, ->
5 | exports.onShake()
6 |
7 | # http://stackoverflow.com/questions/711536
8 | if typeof window.DeviceMotionEvent != 'undefined'
9 |
10 | # Position variables
11 | x1 = 0
12 | y1 = 0
13 | z1 = 0
14 | x2 = 0
15 | y2 = 0
16 | z2 = 0
17 |
18 | # Listen to motion events and update the position
19 | window.addEventListener 'devicemotion', ((e) ->
20 | x1 = e.accelerationIncludingGravity.x
21 | y1 = e.accelerationIncludingGravity.y
22 | z1 = e.accelerationIncludingGravity.z
23 | return
24 | ), false
25 |
26 | # Periodically check the position and fire
27 | # if the change is greater than the sensitivity
28 | setInterval (->
29 |
30 | # Shake sensitivity (a lower number is more)
31 | sensitivity = exports.sensitivity ?= 20
32 | change = Math.abs(x1 - x2 + y1 - y2 + z1 - z2)
33 | if change > sensitivity
34 | handler()
35 |
36 | # Update new position
37 | x2 = x1
38 | y2 = y1
39 | z2 = z1
40 | return
41 | ), 150
--------------------------------------------------------------------------------
/snippet.coffee:
--------------------------------------------------------------------------------
1 | ShakeEvent.onShake = ->
2 | print "Shake detected!"
--------------------------------------------------------------------------------
/thumb@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RayPS/Framer-Module-ShakeEvent/03a2e661ddc5de98963404cbd49f77d79866ff0e/thumb@2x.png
--------------------------------------------------------------------------------