├── README.md ├── arcMovement.coffee ├── images ├── arcMovement.gif ├── circle1.png ├── circle2.gif └── circlePoints.gif ├── moveWithArc.framer ├── .gitignore ├── Icon ├── app.coffee ├── framer │ ├── coffee-script.js │ ├── config.json │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── images │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-180.png │ │ ├── icon-192.png │ │ └── icon-76.png │ ├── manifest.txt │ ├── style.css │ └── version ├── images │ └── .gitkeep ├── index.html └── modules │ ├── arcMovement.coffee │ └── myModule.coffee ├── movewitharc.framer └── framer │ ├── .bookmark │ ├── design.vekter │ └── framer.vekter.js ├── placeOnCircle.framer ├── .gitignore ├── Icon ├── app.coffee ├── framer │ ├── coffee-script.js │ ├── config.json │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── images │ │ ├── background.png │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-180.png │ │ ├── icon-192.png │ │ ├── icon-76.png │ │ ├── icon-arrow.png │ │ ├── icon-arrow@2x.png │ │ ├── icon-close.png │ │ ├── icon-close@2x.png │ │ ├── icon-framer.png │ │ ├── icon-framer@2x.png │ │ ├── icon-share.png │ │ └── icon-share@2x.png │ ├── manifest.txt │ ├── mirror.css │ ├── style.css │ └── version ├── images │ └── .gitkeep ├── index.html └── modules │ ├── arcMovement.coffee │ └── myModule.coffee ├── placeOnCircle2.framer ├── .gitignore ├── Icon ├── app.coffee ├── framer │ ├── coffee-script.js │ ├── config.json │ ├── framer.generated.js │ ├── framer.init.js │ ├── framer.js │ ├── framer.js.map │ ├── framer.modules.js │ ├── images │ │ ├── background.png │ │ ├── cursor-active.png │ │ ├── cursor-active@2x.png │ │ ├── cursor.png │ │ ├── cursor@2x.png │ │ ├── icon-120.png │ │ ├── icon-152.png │ │ ├── icon-180.png │ │ ├── icon-192.png │ │ ├── icon-76.png │ │ ├── icon-arrow.png │ │ ├── icon-arrow@2x.png │ │ ├── icon-close.png │ │ ├── icon-close@2x.png │ │ ├── icon-framer.png │ │ ├── icon-framer@2x.png │ │ ├── icon-share.png │ │ └── icon-share@2x.png │ ├── manifest.txt │ ├── mirror.css │ ├── style.css │ └── version ├── images │ └── .gitkeep ├── index.html └── modules │ ├── arcMovement.coffee │ └── myModule.coffee └── placeOnCircle3.framer ├── .gitignore ├── Icon ├── app.coffee ├── framer ├── coffee-script.js ├── config.json ├── framer.generated.js ├── framer.init.js ├── framer.js ├── framer.js.map ├── framer.modules.js ├── images │ ├── background.png │ ├── cursor-active.png │ ├── cursor-active@2x.png │ ├── cursor.png │ ├── cursor@2x.png │ ├── icon-120.png │ ├── icon-152.png │ ├── icon-180.png │ ├── icon-192.png │ ├── icon-76.png │ ├── icon-arrow.png │ ├── icon-arrow@2x.png │ ├── icon-close.png │ ├── icon-close@2x.png │ ├── icon-framer.png │ ├── icon-framer@2x.png │ ├── icon-share.png │ └── icon-share@2x.png ├── manifest.txt ├── mirror.css ├── style.css └── version ├── images └── .gitkeep ├── index.html └── modules ├── arcMovement.coffee └── myModule.coffee /README.md: -------------------------------------------------------------------------------- 1 | # moveWithArc-FramerJS-module 2 | 3 | Module is alowing you to do 3 things 4 | 1. Place an object on elipse 5 | 6 | ``` 7 | arcMovement.placeOnElipse layerA, 300, 300, 90, 100, 100 8 | ``` 9 | 10 | u run your function with this attributes - layer object, center X of circle, circle Y of center , angle, radiusX, radiusY 11 | 12 | 13 | 2. Move object from one point to other point on screen along the arc, according to current motion guidelines by google 14 | https://www.google.com/design/spec/motion/material-motion.html 15 | 16 | 17 | ``` 18 | arcMovement.moveWithArc layerA, 900, 900, 0.3 19 | ``` 20 | 21 | function attributes layerobject, endPointX, endPointY, time 22 | 23 | you can run function without timing, default one is 0.2 24 | 25 | ``` 26 | arcMovement.moveWithArc layerA, 900, 900 27 | ``` 28 | 29 | 3. You can get x.y position of the object on circle taking its radius 30 | 31 | ``` 32 | circleCoord=arcMovement.circlePoint 500, 500, 360/90, 100, 100 33 | print circleCoord.x, circleCoord.y 34 | 35 | ``` 36 | function attributes - center X of circle, circle Y of center , angle, radiusX, radiusY 37 | 38 | 39 | framer examples: 40 | 41 | ![moving along the arc](https://github.com/mamezito/moveWithArc-FramerJS-module/blob/master/images/arcMovement.gif) 42 | https://framer.cloud/AThCD 43 | 44 | ![placing object on elipse](https://github.com/mamezito/moveWithArc-FramerJS-module/blob/master/images/circle1.png) 45 | http://share.framerjs.com/s1x57kfq10za/ 46 | 47 | ![placing object on elipse](https://github.com/mamezito/moveWithArc-FramerJS-module/blob/master/images/circle2.gif) 48 | http://share.framerjs.com/fb47veij7eh1/ 49 | 50 | ![use x.y coordinates from function to put object on circle with animation](https://github.com/mamezito/moveWithArc-FramerJS-module/blob/master/images/circlePoints.gif) 51 | http://share.framerjs.com/h8mo713t66wp/ 52 | -------------------------------------------------------------------------------- /arcMovement.coffee: -------------------------------------------------------------------------------- 1 | #author Sergiy Voronov twitter.com/mamezito dribbble.com/mamezito 2 | #done for Framer London framerlondon.com 3 | 4 | 5 | exports.moveWithArc=(layer, endPointX, endPointY, time)-> 6 | time?="0.2" 7 | layer.animate 8 | x:endPointX 9 | options: 10 | curve: Bezier.easeIn 11 | time: time 12 | layer.animate 13 | y:endPointY 14 | options: 15 | curve: Bezier.easeOut 16 | time: time 17 | print layer, endPointX, endPointY, time 18 | 19 | 20 | exports.placeOnElipse=(layer, centerX, centerY, angle, radiusX, radiusY)-> 21 | layer.midX=centerX-Math.sin((angle+180) * Math.PI / 180)*radiusX 22 | layer.midY=centerY-Math.cos((angle+180) * Math.PI / 180)*radiusY 23 | -------------------------------------------------------------------------------- /images/arcMovement.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/images/arcMovement.gif -------------------------------------------------------------------------------- /images/circle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/images/circle1.png -------------------------------------------------------------------------------- /images/circle2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/images/circle2.gif -------------------------------------------------------------------------------- /images/circlePoints.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/images/circlePoints.gif -------------------------------------------------------------------------------- /moveWithArc.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | # Framer Specific 31 | .*.html 32 | .app.js 33 | framer/*.old* 34 | framer/.*.hash 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/manifest.txt 38 | framer/preview.png 39 | framer/social-*x*.png 40 | -------------------------------------------------------------------------------- /moveWithArc.framer/Icon : -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/moveWithArc.framer/Icon -------------------------------------------------------------------------------- /moveWithArc.framer/app.coffee: -------------------------------------------------------------------------------- 1 | arcMovement = require 'arcMovement' 2 | layerA = new Layer 3 | borderRadius: 100 4 | width: 50 5 | height: 50 6 | backgroundColor: "red" 7 | 8 | 9 | layerA.center() 10 | 11 | area = new Layer 12 | width: Screen.width 13 | height: Screen.height 14 | backgroundColor: "null" 15 | 16 | area.on Events.Click, (event, layer) -> 17 | arcMovement.moveWithArc layerA, event.pageX, event.pageY, 0.3 -------------------------------------------------------------------------------- /moveWithArc.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "orientation" : 0, 3 | "updateDelay" : 0.3, 4 | "designModeSelected" : 0, 5 | "cachedDeviceHeight" : 0, 6 | "contentScale" : 1, 7 | "cachedDeviceWidth" : 0, 8 | "deviceType" : "fullscreen", 9 | "sharedPrototype" : 0, 10 | "propertyPanelToggleStates" : { 11 | 12 | }, 13 | "projectId" : "B4E0F6BA-5916-4455-A1FA-82943D46034E", 14 | "deviceOrientation" : 0, 15 | "selectedHand" : "", 16 | "showBezel" : 0, 17 | "foldedCodeRanges" : [ 18 | 19 | ], 20 | "deviceScale" : 1 21 | } -------------------------------------------------------------------------------- /moveWithArc.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer && window._bridge) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (DeviceComponent) {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | if (window.Framer) {window.Framer.Defaults.DeviceView = {"deviceScale":1,"selectedHand":"","deviceType":"fullscreen","contentScale":1,"hideBezel":true,"orientation":0}; 7 | } 8 | if (window.Framer) {window.Framer.Defaults.DeviceComponent = {"deviceScale":1,"selectedHand":"","deviceType":"fullscreen","contentScale":1,"hideBezel":true,"orientation":0}; 9 | } 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"movewitharc.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /moveWithArc.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "
" 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
" 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function loadProject(callback) { 60 | CoffeeScript.load("app.coffee", callback) 61 | } 62 | 63 | function setDefaultPageTitle() { 64 | // If no title was set we set it to the project folder name so 65 | // you get a nice name on iOS if you bookmark to desktop. 66 | document.addEventListener("DOMContentLoaded", function() { 67 | if (document.title == "") { 68 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 69 | document.title = window.FramerStudioInfo.documentTitle 70 | } else { 71 | document.title = window.location.pathname.replace(/\//g, "") 72 | } 73 | } 74 | }) 75 | } 76 | 77 | function init() { 78 | 79 | if (Utils.isFramerStudio()) { 80 | return 81 | } 82 | 83 | setDefaultPageTitle() 84 | 85 | if (!isCompatibleBrowser()) { 86 | return showBrowserAlert() 87 | } 88 | 89 | if (!isFileLoadingAllowed()) { 90 | return showFileLoadingAlert() 91 | } 92 | 93 | loadProject(function(){ 94 | // CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project") 95 | var context; 96 | if (typeof Framer !== "undefined" && Framer !== null) { 97 | if ((context = Framer.CurrentContext) != null) { 98 | if (typeof context.emit === "function") { 99 | context.emit("loaded:project"); 100 | } 101 | } 102 | } 103 | }) 104 | } 105 | 106 | init() 107 | 108 | })() 109 | -------------------------------------------------------------------------------- /moveWithArc.framer/framer/framer.modules.js: -------------------------------------------------------------------------------- 1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /moveWithArc.framer/modules/arcMovement.coffee: -------------------------------------------------------------------------------- 1 | #author Sergiy Voronov twitter.com/mamezito dribbble.com/mamezito 2 | #done for Framer London framerlondon.com 3 | 4 | 5 | exports.moveWithArc=(layer, endPointX, endPointY, time)-> 6 | time?="0.2" 7 | layer.animate 8 | x:endPointX 9 | options: 10 | curve: Bezier.easeIn 11 | time: time 12 | layer.animate 13 | y:endPointY 14 | options: 15 | curve: Bezier.easeOut 16 | time: time 17 | print layer, endPointX, endPointY, time 18 | 19 | 20 | exports.placeOnElipse=(layer, centerX, centerY, angle, radiusX, radiusY)-> 21 | layer.midX=centerX-Math.sin((angle+180) * Math.PI / 180)*radiusX 22 | layer.midY=centerY-Math.cos((angle+180) * Math.PI / 180)*radiusY 23 | -------------------------------------------------------------------------------- /moveWithArc.framer/modules/myModule.coffee: -------------------------------------------------------------------------------- 1 | # Add the following line to your project in Framer Studio. 2 | # myModule = require "myModule" 3 | # Reference the contents by name, like myModule.myFunction() or myModule.myVar 4 | 5 | exports.myVar = "myVariable" 6 | 7 | exports.myFunction = -> 8 | print "myFunction is running" 9 | 10 | exports.myArray = [1, 2, 3] -------------------------------------------------------------------------------- /movewitharc.framer/framer/.bookmark: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/movewitharc.framer/framer/.bookmark -------------------------------------------------------------------------------- /movewitharc.framer/framer/design.vekter: -------------------------------------------------------------------------------- 1 | { 2 | "version" : 0, 3 | "root" : { 4 | "id" : "%tqn%`w'", 5 | "__class" : "CanvasNode", 6 | "parentid" : null, 7 | "children" : [ 8 | 9 | ] 10 | } 11 | } -------------------------------------------------------------------------------- /movewitharc.framer/framer/framer.vekter.js: -------------------------------------------------------------------------------- 1 | (function(scope) {if (scope["__vekterVariables"]) { scope["__vekterVariables"].map(function(variable) { delete scope[variable] } ) };Object.assign(scope, {});scope["__vekterVariables"] = [""];if (typeof Framer.CurrentContext.layout === 'function') {Framer.CurrentContext.layout()};})(window); -------------------------------------------------------------------------------- /placeOnCircle.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | 32 | # Framer Specific 33 | .temp.html 34 | framer/*.old* 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/.*.hash 38 | -------------------------------------------------------------------------------- /placeOnCircle.framer/Icon : -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/placeOnCircle.framer/Icon -------------------------------------------------------------------------------- /placeOnCircle.framer/app.coffee: -------------------------------------------------------------------------------- 1 | arcMovement = require "arcMovement" 2 | 3 | 4 | layerB = new Layer 5 | x: 230 6 | y: 187 7 | borderRadius: 100 8 | borderWidth: 2 9 | borderColor: "rgba(255,255,255,0.5)" 10 | backgroundColor: "rgba(255,255,255,0)" 11 | layerB.center() 12 | 13 | amount=10 14 | for i in [0..amount] 15 | layerA = new Layer 16 | borderRadius: 100 17 | width: 50 18 | height: 50 19 | backgroundColor: "white" 20 | # layer object, center X of circle, circle Y of center , angle, radiusX, radiusY 21 | arcMovement.placeOnElipse layerA, layerB.midX, layerB.midY, 360/amount*i, 100, 100 22 | 23 | backgroundA = new BackgroundLayer 24 | backgroundColor: "rgba(46,181,255,1)" 25 | 26 | -------------------------------------------------------------------------------- /placeOnCircle.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "propertyPanelToggleStates" : { 3 | "Filters" : false 4 | }, 5 | "deviceOrientation" : 0, 6 | "sharedPrototype" : 1, 7 | "contentScale" : 1, 8 | "deviceType" : "fullscreen", 9 | "selectedHand" : "", 10 | "updateDelay" : 0.3, 11 | "deviceScale" : 1, 12 | "codeFolds" : [ 13 | 14 | ], 15 | "orientation" : 0 16 | } -------------------------------------------------------------------------------- /placeOnCircle.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (typeof(DeviceComponent) !== "undefined") {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | window.Framer.Defaults.DeviceView = {"deviceScale":1,"selectedHand":"","deviceType":"fullscreen","contentScale":1,"orientation":0}; 7 | 8 | window.Framer.Defaults.DeviceComponent = {"deviceScale":1,"selectedHand":"","deviceType":"fullscreen","contentScale":1,"orientation":0}; 9 | 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"placeOnCircle.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /placeOnCircle.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "
" 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
" 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function showHomeScreenAlert() { 60 | 61 | link = document.createElement("link"); 62 | link.href = "framer/mirror.css" 63 | link.type = "text/css" 64 | link.rel = "stylesheet" 65 | link.media = "screen" 66 | 67 | document.addEventListener("DOMContentLoaded", function(event) { 68 | document.getElementsByTagName("head")[0].appendChild(link) 69 | }) 70 | 71 | var html = "" 72 | html += "
" 73 | html += "
" 74 | html += "

Install Prototype

" 75 | html += "

Tap

, then choose 'Add to Home Screen'

" 76 | html += "
" 77 | html += "
" 78 | 79 | showAlert(html) 80 | } 81 | 82 | function loadProject() { 83 | CoffeeScript.load("app.coffee") 84 | } 85 | 86 | function setDefaultPageTitle() { 87 | // If no title was set we set it to the project folder name so 88 | // you get a nice name on iOS if you bookmark to desktop. 89 | document.addEventListener("DOMContentLoaded", function() { 90 | if (document.title == "") { 91 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 92 | document.title = window.FramerStudioInfo.documentTitle 93 | } else { 94 | document.title = window.location.pathname.replace(/\//g, "") 95 | } 96 | } 97 | }) 98 | } 99 | 100 | function init() { 101 | 102 | if (Utils.isFramerStudio()) { 103 | return 104 | } 105 | 106 | setDefaultPageTitle() 107 | 108 | if (!isCompatibleBrowser()) { 109 | return showBrowserAlert() 110 | } 111 | 112 | if (!isFileLoadingAllowed()) { 113 | return showFileLoadingAlert() 114 | } 115 | 116 | // if (Utils.isMobile() && !isHomeScreened()) { 117 | // return showHomeScreenAlert() 118 | // } 119 | 120 | loadProject() 121 | 122 | } 123 | 124 | init() 125 | 126 | })() 127 | -------------------------------------------------------------------------------- /placeOnCircle.framer/framer/framer.modules.js: -------------------------------------------------------------------------------- 1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /placeOnCircle.framer/modules/arcMovement.coffee: -------------------------------------------------------------------------------- 1 | #author Sergiy Voronov twitter.com/mamezito dribbble.com/mamezito 2 | #done for Framer London framerlondon.com 3 | 4 | 5 | exports.moveWithArc=(layer, endPointX, endPointY, time)-> 6 | time?="0.2" 7 | layer.animate 8 | x:endPointX 9 | options: 10 | curve: Bezier.easeIn 11 | time: time 12 | layer.animate 13 | y:endPointY 14 | options: 15 | curve: Bezier.easeOut 16 | time: time 17 | print layer, endPointX, endPointY, time 18 | 19 | 20 | exports.placeOnElipse=(layer, centerX, centerY, angle, radiusX, radiusY)-> 21 | layer.midX=centerX-Math.sin((angle+180) * Math.PI / 180)*radiusX 22 | layer.midY=centerY-Math.cos((angle+180) * Math.PI / 180)*radiusY 23 | -------------------------------------------------------------------------------- /placeOnCircle.framer/modules/myModule.coffee: -------------------------------------------------------------------------------- 1 | # Add the following line to your project in Framer Studio. 2 | # myModule = require "myModule" 3 | # Reference the contents by name, like myModule.myFunction() or myModule.myVar 4 | 5 | exports.myVar = "myVariable" 6 | 7 | exports.myFunction = -> 8 | print "myFunction is running" 9 | 10 | exports.myArray = [1, 2, 3] -------------------------------------------------------------------------------- /placeOnCircle2.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | 32 | # Framer Specific 33 | .temp.html 34 | framer/*.old* 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/.*.hash 38 | -------------------------------------------------------------------------------- /placeOnCircle2.framer/Icon : -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/placeOnCircle2.framer/Icon -------------------------------------------------------------------------------- /placeOnCircle2.framer/app.coffee: -------------------------------------------------------------------------------- 1 | arcMovement = require "arcMovement" 2 | 3 | backgroundA = new BackgroundLayer 4 | backgroundColor: "rgba(46,181,255,1)" 5 | 6 | layerB = new Layer 7 | x: 230 8 | y: 187 9 | borderRadius: 100 10 | borderWidth: 2 11 | borderColor: "rgba(255,255,255,0.5)" 12 | backgroundColor: "rgba(255,255,255,0)" 13 | layerB.center() 14 | 15 | 16 | layerA = new Layer 17 | borderRadius: 100 18 | width: 50 19 | height: 50 20 | backgroundColor: "white" 21 | 22 | arcMovement.placeOnElipse layerA, layerB.midX, layerB.midY, 0, 100, 100 23 | 24 | slider = new SliderComponent 25 | slider.center() 26 | slider.y+=500 27 | slider.min=0 28 | slider.max=360 29 | slider.on "change:value", -> 30 | # layer object, center X of circle, circle Y of center , angle, radiusX, radiusY 31 | arcMovement.placeOnElipse layerA, layerB.midX, layerB.midY, this.value, 100, 100 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /placeOnCircle2.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "propertyPanelToggleStates" : { 3 | 4 | }, 5 | "deviceOrientation" : 0, 6 | "sharedPrototype" : 0, 7 | "contentScale" : 1, 8 | "deviceType" : "apple-iphone-6s-silver", 9 | "selectedHand" : "", 10 | "updateDelay" : 0.3, 11 | "deviceScale" : "fit", 12 | "codeFolds" : [ 13 | 14 | ], 15 | "orientation" : 0, 16 | "fullScreen" : false 17 | } -------------------------------------------------------------------------------- /placeOnCircle2.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (typeof(DeviceComponent) !== "undefined") {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | window.Framer.Defaults.DeviceView = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-6s-silver","contentScale":1,"orientation":0}; 7 | 8 | window.Framer.Defaults.DeviceComponent = {"deviceScale":"fit","selectedHand":"","deviceType":"apple-iphone-6s-silver","contentScale":1,"orientation":0}; 9 | 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"placeOnCircle2.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /placeOnCircle2.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "
" 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
" 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function showHomeScreenAlert() { 60 | 61 | link = document.createElement("link"); 62 | link.href = "framer/mirror.css" 63 | link.type = "text/css" 64 | link.rel = "stylesheet" 65 | link.media = "screen" 66 | 67 | document.addEventListener("DOMContentLoaded", function(event) { 68 | document.getElementsByTagName("head")[0].appendChild(link) 69 | }) 70 | 71 | var html = "" 72 | html += "
" 73 | html += "
" 74 | html += "

Install Prototype

" 75 | html += "

Tap

, then choose 'Add to Home Screen'

" 76 | html += "
" 77 | html += "
" 78 | 79 | showAlert(html) 80 | } 81 | 82 | function loadProject() { 83 | CoffeeScript.load("app.coffee") 84 | } 85 | 86 | function setDefaultPageTitle() { 87 | // If no title was set we set it to the project folder name so 88 | // you get a nice name on iOS if you bookmark to desktop. 89 | document.addEventListener("DOMContentLoaded", function() { 90 | if (document.title == "") { 91 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 92 | document.title = window.FramerStudioInfo.documentTitle 93 | } else { 94 | document.title = window.location.pathname.replace(/\//g, "") 95 | } 96 | } 97 | }) 98 | } 99 | 100 | function init() { 101 | 102 | if (Utils.isFramerStudio()) { 103 | return 104 | } 105 | 106 | setDefaultPageTitle() 107 | 108 | if (!isCompatibleBrowser()) { 109 | return showBrowserAlert() 110 | } 111 | 112 | if (!isFileLoadingAllowed()) { 113 | return showFileLoadingAlert() 114 | } 115 | 116 | // if (Utils.isMobile() && !isHomeScreened()) { 117 | // return showHomeScreenAlert() 118 | // } 119 | 120 | loadProject() 121 | 122 | } 123 | 124 | init() 125 | 126 | })() 127 | -------------------------------------------------------------------------------- /placeOnCircle2.framer/framer/framer.modules.js: -------------------------------------------------------------------------------- 1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /placeOnCircle2.framer/modules/arcMovement.coffee: -------------------------------------------------------------------------------- 1 | #author Sergiy Voronov twitter.com/mamezito dribbble.com/mamezito 2 | #done for Framer London framerlondon.com 3 | 4 | 5 | exports.moveWithArc=(layer, endPointX, endPointY, time)-> 6 | time?="0.2" 7 | layer.animate 8 | x:endPointX 9 | options: 10 | curve: Bezier.easeIn 11 | time: time 12 | layer.animate 13 | y:endPointY 14 | options: 15 | curve: Bezier.easeOut 16 | time: time 17 | print layer, endPointX, endPointY, time 18 | 19 | 20 | exports.placeOnElipse=(layer, centerX, centerY, angle, radiusX, radiusY)-> 21 | layer.midX=centerX-Math.sin((angle+180) * Math.PI / 180)*radiusX 22 | layer.midY=centerY-Math.cos((angle+180) * Math.PI / 180)*radiusY 23 | -------------------------------------------------------------------------------- /placeOnCircle2.framer/modules/myModule.coffee: -------------------------------------------------------------------------------- 1 | # Add the following line to your project in Framer Studio. 2 | # myModule = require "myModule" 3 | # Reference the contents by name, like myModule.myFunction() or myModule.myVar 4 | 5 | exports.myVar = "myVariable" 6 | 7 | exports.myFunction = -> 8 | print "myFunction is running" 9 | 10 | exports.myArray = [1, 2, 3] -------------------------------------------------------------------------------- /placeOnCircle3.framer/.gitignore: -------------------------------------------------------------------------------- 1 | # Framer Git Ignore 2 | 3 | # General OSX 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | 13 | # Thumbnails 14 | ._* 15 | 16 | # Files that might appear in the root of a volume 17 | .DocumentRevisions-V100 18 | .fseventsd 19 | .Spotlight-V100 20 | .TemporaryItems 21 | .Trashes 22 | .VolumeIcon.icns 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | 32 | # Framer Specific 33 | .temp.html 34 | framer/*.old* 35 | framer/backup.coffee 36 | framer/backups/* 37 | framer/.*.hash 38 | -------------------------------------------------------------------------------- /placeOnCircle3.framer/Icon : -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mamezito-zz/moveWithArc-FramerJS-module/77a90597589ddaab1093b3b3fdfe38e45c6a7888/placeOnCircle3.framer/Icon -------------------------------------------------------------------------------- /placeOnCircle3.framer/app.coffee: -------------------------------------------------------------------------------- 1 | arcMovement = require "arcMovement" 2 | 3 | 4 | amount=10 5 | 6 | for i in [0...amount] 7 | layerA = new Layer 8 | borderRadius: 100 9 | width: 50 10 | height: 50 11 | x:10*i 12 | y:10*i 13 | scale:0 14 | opacity:0 15 | backgroundColor: "white" 16 | # layer object, center X of circle, circle Y of center , angle, radiusX, radiusY 17 | circleCoord=arcMovement.circlePoint Screen.width/2, Screen.height/2, 360/amount*i, 100, 100 18 | layerA.animate 19 | properties: 20 | midX:circleCoord.x 21 | midY:circleCoord.y 22 | scale:1 23 | opacity:1 24 | delay:0.1*i 25 | curve: "spring(150, 10, 0)" 26 | 27 | 28 | backgroundA = new BackgroundLayer 29 | backgroundColor: "rgba(46,181,255,1)" 30 | 31 | -------------------------------------------------------------------------------- /placeOnCircle3.framer/framer/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "propertyPanelToggleStates" : { 3 | "Filters" : false 4 | }, 5 | "deviceOrientation" : 0, 6 | "sharedPrototype" : 1, 7 | "contentScale" : 1, 8 | "deviceType" : "fullscreen", 9 | "selectedHand" : "", 10 | "updateDelay" : 0.3, 11 | "deviceScale" : 1, 12 | "codeFolds" : [ 13 | 14 | ], 15 | "orientation" : 0 16 | } -------------------------------------------------------------------------------- /placeOnCircle3.framer/framer/framer.generated.js: -------------------------------------------------------------------------------- 1 | // This is autogenerated by Framer 2 | 3 | 4 | if (!window.Framer) {window._bridge('runtime.error', {message:'[framer.js] Framer library missing or corrupt. Select File → Update Framer Library.'})} 5 | if (typeof(DeviceComponent) !== "undefined") {DeviceComponent.Devices["iphone-6-silver"].deviceImageJP2 = false}; 6 | window.Framer.Defaults.DeviceView = {"deviceScale":1,"selectedHand":"","deviceType":"fullscreen","contentScale":1,"orientation":0}; 7 | 8 | window.Framer.Defaults.DeviceComponent = {"deviceScale":1,"selectedHand":"","deviceType":"fullscreen","contentScale":1,"orientation":0}; 9 | 10 | window.FramerStudioInfo = {"deviceImagesUrl":"\/_server\/resources\/DeviceImages","documentTitle":"placeOnCircle3.framer"}; 11 | 12 | Framer.Device = new Framer.DeviceView(); 13 | Framer.Device.setupContext(); -------------------------------------------------------------------------------- /placeOnCircle3.framer/framer/framer.init.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function isFileLoadingAllowed() { 4 | return (window.location.protocol.indexOf("file") == -1) 5 | } 6 | 7 | function isHomeScreened() { 8 | return ("standalone" in window.navigator) && window.navigator.standalone == true 9 | } 10 | 11 | function isCompatibleBrowser() { 12 | return Utils.isWebKit() 13 | } 14 | 15 | var alertNode; 16 | 17 | function dismissAlert() { 18 | alertNode.parentElement.removeChild(alertNode) 19 | loadProject() 20 | } 21 | 22 | function showAlert(html) { 23 | 24 | alertNode = document.createElement("div") 25 | 26 | alertNode.classList.add("framerAlertBackground") 27 | alertNode.innerHTML = html 28 | 29 | document.addEventListener("DOMContentLoaded", function(event) { 30 | document.body.appendChild(alertNode) 31 | }) 32 | 33 | window.dismissAlert = dismissAlert; 34 | } 35 | 36 | function showBrowserAlert() { 37 | var html = "" 38 | html += "
" 39 | html += "Error: Not A WebKit Browser" 40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
" 43 | 44 | showAlert(html) 45 | } 46 | 47 | function showFileLoadingAlert() { 48 | var html = "" 49 | html += "
" 50 | html += "Error: Local File Restrictions" 51 | html += "Preview this prototype with Framer Mirror or learn more about " 52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
" 55 | 56 | showAlert(html) 57 | } 58 | 59 | function showHomeScreenAlert() { 60 | 61 | link = document.createElement("link"); 62 | link.href = "framer/mirror.css" 63 | link.type = "text/css" 64 | link.rel = "stylesheet" 65 | link.media = "screen" 66 | 67 | document.addEventListener("DOMContentLoaded", function(event) { 68 | document.getElementsByTagName("head")[0].appendChild(link) 69 | }) 70 | 71 | var html = "" 72 | html += "
" 73 | html += "
" 74 | html += "

Install Prototype

" 75 | html += "

Tap

, then choose 'Add to Home Screen'

" 76 | html += "
" 77 | html += "
" 78 | 79 | showAlert(html) 80 | } 81 | 82 | function loadProject() { 83 | CoffeeScript.load("app.coffee") 84 | } 85 | 86 | function setDefaultPageTitle() { 87 | // If no title was set we set it to the project folder name so 88 | // you get a nice name on iOS if you bookmark to desktop. 89 | document.addEventListener("DOMContentLoaded", function() { 90 | if (document.title == "") { 91 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) { 92 | document.title = window.FramerStudioInfo.documentTitle 93 | } else { 94 | document.title = window.location.pathname.replace(/\//g, "") 95 | } 96 | } 97 | }) 98 | } 99 | 100 | function init() { 101 | 102 | if (Utils.isFramerStudio()) { 103 | return 104 | } 105 | 106 | setDefaultPageTitle() 107 | 108 | if (!isCompatibleBrowser()) { 109 | return showBrowserAlert() 110 | } 111 | 112 | if (!isFileLoadingAllowed()) { 113 | return showFileLoadingAlert() 114 | } 115 | 116 | // if (Utils.isMobile() && !isHomeScreened()) { 117 | // return showHomeScreenAlert() 118 | // } 119 | 120 | loadProject() 121 | 122 | } 123 | 124 | init() 125 | 126 | })() 127 | -------------------------------------------------------------------------------- /placeOnCircle3.framer/framer/framer.modules.js: -------------------------------------------------------------------------------- 1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /placeOnCircle3.framer/modules/arcMovement.coffee: -------------------------------------------------------------------------------- 1 | #author Sergiy Voronov twitter.com/mamezito dribbble.com/mamezito 2 | #done for Framer London framerlondon.com 3 | 4 | 5 | exports.moveWithArc=(layer, endPointX, endPointY, time)-> 6 | time?="0.2" 7 | layer.animate 8 | x:endPointX 9 | options: 10 | curve: Bezier.easeIn 11 | time: time 12 | layer.animate 13 | y:endPointY 14 | options: 15 | curve: Bezier.easeOut 16 | time: time 17 | print layer, endPointX, endPointY, time 18 | 19 | 20 | exports.placeOnElipse=(layer, centerX, centerY, angle, radiusX, radiusY)-> 21 | layer.midX=centerX-Math.sin((angle+180) * Math.PI / 180)*radiusX 22 | layer.midY=centerY-Math.cos((angle+180) * Math.PI / 180)*radiusY 23 | -------------------------------------------------------------------------------- /placeOnCircle3.framer/modules/myModule.coffee: -------------------------------------------------------------------------------- 1 | # Add the following line to your project in Framer Studio. 2 | # myModule = require "myModule" 3 | # Reference the contents by name, like myModule.myFunction() or myModule.myVar 4 | 5 | exports.myVar = "myVariable" 6 | 7 | exports.myFunction = -> 8 | print "myFunction is running" 9 | 10 | exports.myArray = [1, 2, 3] --------------------------------------------------------------------------------