├── .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 --------------------------------------------------------------------------------