├── Actions ├── Click.coffee ├── Keydown.coffee ├── Touch End.coffee ├── Touch Move.coffee └── Touch Start.coffee ├── Animate ├── Dimensions.coffee ├── Opacity.coffee ├── Position.coffee ├── Repeating Halt.coffee ├── Repeating Start.coffee ├── Rotation.coffee ├── Scale.coffee ├── Slow Down Animations.coffee ├── Trigger On End (casual).coffee ├── Trigger On End (formal).coffee └── With Delay.coffee ├── Drag ├── Enable Draggable.coffee ├── End.coffee ├── Move.coffee ├── Position.coffee └── Start.coffee ├── Flow ├── Flow Component.coffee ├── Footer.coffee ├── Header.coffee ├── Show Next No Animation.coffee ├── Show Next.coffee ├── Show Overlay Center.coffee ├── Show Overlay Left.coffee ├── Show Overlay Right.coffee ├── Show Overlay Top (Notif).coffee └── Show Previous.coffee ├── Layer Properties ├── Background.coffee ├── Blur.coffee ├── Border.coffee ├── Bring To Front.coffee ├── Center.coffee ├── Circle.coffee ├── HTML.coffee ├── Image.coffee ├── Name.coffee ├── Opacity.coffee ├── Place Before.coffee ├── Place Behind.coffee ├── Saturation.coffee ├── Send To Back.coffee ├── Shadow.coffee └── Style.coffee ├── Layers ├── Destroy.coffee ├── Sub Layer.coffee └── Video.coffee ├── Other ├── Delay Utility.coffee ├── Device Check.coffee ├── Disable Hints.coffee ├── Interval Utility.coffee ├── JSON API Call.coffee ├── Print Examples.coffee └── Project Setup Example.coffee ├── Scroll ├── Content Inset.coffee ├── Direction Lock.coffee ├── Enable Mouse Wheel.coffee ├── Position.coffee ├── Simple Scroll.coffee └── Velocity.coffee ├── Springs ├── Define All Springs As Variables.coffee ├── Generic Dramatic.coffee ├── Generic Floaty.coffee ├── Generic Hello.coffee ├── Generic Loose.coffee ├── Generic Pop Big.coffee ├── Generic Pop.coffee ├── Generic Quick.coffee ├── Generic Retreat.coffee ├── Generic Slow.coffee ├── Material Action Sheet.coffee ├── Material App Launch.coffee ├── Material Keyboard.coffee ├── Material Retreat.coffee ├── Material Slide View.coffee ├── iOS Action Sheet.coffee ├── iOS App Launch.coffee ├── iOS Keyboard.coffee ├── iOS Retreat.coffee └── iOS Slide View.coffee ├── State ├── Animation Options.coffee ├── Define States.coffee ├── If Current State Name Then.coffee └── State Cycle.coffee └── readme.md /Actions/Click.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.onClick -> 5 | """ 6 | -------------------------------------------------------------------------------- /Actions/Keydown.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | document.addEventListener "keydown", (event) -> 5 | keyCode = event.which 6 | if keyCode is 49 7 | print "1" 8 | if keyCode is 50 9 | print "2" 10 | if keyCode is 51 11 | print "3" 12 | """ 13 | -------------------------------------------------------------------------------- /Actions/Touch End.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.onTouchEnd -> 5 | print "Touch end" 6 | """ 7 | -------------------------------------------------------------------------------- /Actions/Touch Move.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.onTouchMove -> 5 | print "Touch move" 6 | """ 7 | -------------------------------------------------------------------------------- /Actions/Touch Start.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.onTouchStart -> 5 | print "Touch start" 6 | """ 7 | -------------------------------------------------------------------------------- /Animate/Dimensions.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animate 5 | properties: 6 | width: 400 7 | height: 400 8 | curve: "spring(280,30,0)" 9 | """ 10 | -------------------------------------------------------------------------------- /Animate/Opacity.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animate 5 | properties: 6 | opacity: 0 7 | curve: "spring(280,30,0)" 8 | """ 9 | -------------------------------------------------------------------------------- /Animate/Position.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animate 5 | properties: 6 | x: 0 7 | y: 0 8 | curve: "spring(280,30,0)" 9 | """ 10 | -------------------------------------------------------------------------------- /Animate/Repeating Halt.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerB.onClick -> 5 | animationA.stop() 6 | animationB.stop() 7 | """ 8 | -------------------------------------------------------------------------------- /Animate/Repeating Start.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | animationA = new Animation 5 | layer: layerA 6 | properties: 7 | scale: 0 8 | curve: "spring(100,30,0)" 9 | 10 | animationB = new Animation 11 | layer: layerA 12 | properties: 13 | scale: 1 14 | curve: "spring(100,30,0)" 15 | 16 | layerA.onClick -> 17 | animationA.start() 18 | 19 | animationA.on(Events.AnimationEnd, animationB.start) 20 | animationB.on(Events.AnimationEnd, animationA.start) 21 | """ 22 | -------------------------------------------------------------------------------- /Animate/Rotation.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animate 5 | properties: 6 | rotation: 180 7 | curve: "spring(280,30,0)" 8 | """ 9 | -------------------------------------------------------------------------------- /Animate/Scale.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animate 5 | properties: 6 | scale: 0 7 | curve: "spring(280,30,0)" 8 | """ 9 | -------------------------------------------------------------------------------- /Animate/Slow Down Animations.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | ## Slow down animations 5 | Framer.Loop.delta = 1 / 240 6 | """ 7 | -------------------------------------------------------------------------------- /Animate/Trigger On End (casual).coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.onClick -> 5 | animationA = layerA.animate 6 | properties: 7 | scale: 0 8 | curve: "spring(100,30,0)" 9 | animationA.on Events.AnimationEnd, -> 10 | layerB.animate 11 | properties: 12 | scale: 0 13 | curve: "spring(100,30,0)" 14 | """ 15 | -------------------------------------------------------------------------------- /Animate/Trigger On End (formal).coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | animationA = new Animation 5 | layer: layerA 6 | properties: 7 | scale: 0 8 | curve: "spring(100,30,0)" 9 | 10 | animationB = new Animation 11 | layer: layerB 12 | properties: 13 | scale: 0 14 | curve: "spring(100,30,0)" 15 | 16 | layerA.onClick -> 17 | animationA.start() 18 | 19 | animationA.on Events.AnimationEnd, -> 20 | animationB.start() 21 | """ 22 | -------------------------------------------------------------------------------- /Animate/With Delay.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animate 5 | properties: 6 | opacity: 0 7 | curve: "spring(280,30,0)" 8 | delay: 1 9 | """ 10 | -------------------------------------------------------------------------------- /Drag/Enable Draggable.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.draggable.enabled = true 5 | """ 6 | -------------------------------------------------------------------------------- /Drag/End.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.on Events.DragEnd, -> 5 | """ 6 | -------------------------------------------------------------------------------- /Drag/Move.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.on Events.DragMove, -> 5 | """ 6 | -------------------------------------------------------------------------------- /Drag/Position.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.on Events.DragMove, -> 5 | print layerA.point 6 | """ 7 | -------------------------------------------------------------------------------- /Drag/Start.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.on Events.DragStart, -> 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Flow Component.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow = new FlowComponent 5 | flow.showNext(layerA) 6 | """ 7 | -------------------------------------------------------------------------------- /Flow/Footer.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.footer = layerA 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Header.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.header = layerA 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Next No Animation.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showNext(layerA, animate: false) 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Next.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showNext(layerA) 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Overlay Center.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showOverlayCenter(layerA) 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Overlay Left.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showOverlayLeft(layerA) 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Overlay Right.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showOverlayRight(layerA) 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Overlay Top (Notif).coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showOverlayTop(layerA) 5 | """ 6 | -------------------------------------------------------------------------------- /Flow/Show Previous.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | flow.showPrevious(layerA) 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Background.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.backgroundColor = "#eee" 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Blur.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.blur = 10 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Border.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.borderWidth = 10 5 | layerA.borderColor = "white" 6 | """ 7 | -------------------------------------------------------------------------------- /Layer Properties/Bring To Front.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.bringToFront() 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Center.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.center() 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Circle.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.borderRadius = layerA.width/2 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/HTML.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.html = "Hello World!" 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Image.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.image = "https://pbs.twimg.com/profile_images/574269758595407872/DiT2a36E.jpeg" 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Name.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.name = "Layer Name" 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Opacity.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.opacity = 0 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Place Before.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.placeBefore(layerB) 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Place Behind.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.placeBehind(layerB) 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Saturation.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.saturate = 0 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Send To Back.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.sendToBack() 5 | """ 6 | -------------------------------------------------------------------------------- /Layer Properties/Shadow.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.shadowY = 10 5 | layerA.shadowBlur = 40 6 | layerA.shadowColor = "rgba(0,0,0,0.3)" 7 | """ 8 | -------------------------------------------------------------------------------- /Layer Properties/Style.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.style = 5 | "background-color": "red", 6 | "borderRadius": "100px" 7 | """ 8 | -------------------------------------------------------------------------------- /Layers/Destroy.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.destroy() 5 | """ 6 | -------------------------------------------------------------------------------- /Layers/Sub Layer.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA = new Layer 5 | 6 | layerB = new Layer 7 | parent: layerA 8 | """ 9 | -------------------------------------------------------------------------------- /Layers/Video.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | video = new VideoLayer 5 | width: 1920 6 | height: 1080 7 | video: "filename.mov" 8 | 9 | video.player.play() 10 | """ 11 | -------------------------------------------------------------------------------- /Other/Delay Utility.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | Utils.delay 2.5, -> 5 | print "Hello World!" 6 | """ 7 | -------------------------------------------------------------------------------- /Other/Device Check.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | desktop = Utils.isDesktop() 5 | phone = Utils.isPhone() 6 | tablet = Utils.isTablet() 7 | 8 | if desktop == true 9 | print "This is a desktop." 10 | if phone == true 11 | print "This is a phone." 12 | if tablet == true 13 | print "This is a tablet." 14 | """ 15 | -------------------------------------------------------------------------------- /Other/Disable Hints.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | Framer.Extras.Hints.disable() 5 | """ 6 | -------------------------------------------------------------------------------- /Other/Interval Utility.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | Utils.interval 1, -> 5 | print "Hello World!" 6 | """ 7 | -------------------------------------------------------------------------------- /Other/JSON API Call.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | Utils.domLoadJSON "https://api.github.com/repos/koenbok/Framer", (error, response) -> 5 | print response.name 6 | print response.url 7 | print response.description 8 | """ 9 | -------------------------------------------------------------------------------- /Other/Print Examples.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | # Normal Logging 5 | print "Hello, world!" 6 | 7 | # Variable Logging 8 | testVariable = 1 9 | print testVariable 10 | """ 11 | -------------------------------------------------------------------------------- /Other/Project Setup Example.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | # define objects 5 | layerA = new Layer 6 | x: 275 7 | y: 567 8 | backgroundColor: "rgba(50,102,255,1)" 9 | 10 | # define initial values 11 | layerA.opacity = 0.5 12 | 13 | # define springs 14 | slowSpring = "spring(100,30,0)" 15 | 16 | # define animations 17 | grow = (layer) -> 18 | layer.animate 19 | properties: 20 | scale: 3 21 | curve: slowSpring 22 | 23 | # define user actions 24 | layerA.onClick -> 25 | grow(this) 26 | """ 27 | -------------------------------------------------------------------------------- /Scroll/Content Inset.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | scroll.contentInset = 5 | top: 100 6 | bottom: 100 7 | right: 0 8 | left: 0 9 | """ 10 | -------------------------------------------------------------------------------- /Scroll/Direction Lock.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | scroll.directionLock = true 5 | """ 6 | -------------------------------------------------------------------------------- /Scroll/Enable Mouse Wheel.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | scroll.mouseWheelEnabled = true 5 | """ 6 | -------------------------------------------------------------------------------- /Scroll/Position.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | scroll.onMove -> 5 | print scroll.scrollY 6 | """ 7 | -------------------------------------------------------------------------------- /Scroll/Simple Scroll.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | scroll = ScrollComponent.wrap(layerA) 5 | scroll.scrollHorizontal = false 6 | """ 7 | -------------------------------------------------------------------------------- /Scroll/Velocity.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | scroll.onMove -> 5 | scroll.on Events.Scroll, -> 6 | print scroll.velocity 7 | """ 8 | -------------------------------------------------------------------------------- /Springs/Define All Springs As Variables.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | # Springs 5 | 6 | iOSAppLaunch = "spring(320,40,0)" 7 | iOSKeyboard = "spring(280,33,10)" 8 | iOSSlideView = "spring(220,28,0)" 9 | iOSRetreat = "spring(220,28,0)" 10 | iOSActionSheet = "spring(280,33,10)" 11 | 12 | materialAppLaunch = "spring(260,32,16)" 13 | materialKeyboard = "spring(220,35,25)" 14 | materialSlideView = "spring(220,35,25)" 15 | materialRetreat = "spring(160,30,10)" 16 | materialActionSheet = "spring(250,37,20)" 17 | 18 | floaty = "spring(160,40,10)" 19 | hello = "spring(400,22,20)" 20 | retreat = "spring(160,30,10)" 21 | pop = "spring(280,13,10)" 22 | bigPop = "spring(370,8,0)" 23 | dramatic = "spring(120,140,0)" 24 | slow = "spring(100,50,0)" 25 | quick = "spring(400,23,6)" 26 | loose = "spring(240,18,28)" 27 | """ 28 | -------------------------------------------------------------------------------- /Springs/Generic Dramatic.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(120,140,0)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Floaty.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(160,40,10)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Hello.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(400,22,20)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Loose.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(240,18,28)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Pop Big.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(370,8,0)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Pop.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(280,13,10)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Quick.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(400,23,6)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Retreat.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(160,30,10)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Generic Slow.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(100,50,0)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Material Action Sheet.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(250,37,20)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Material App Launch.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(260,32,16)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Material Keyboard.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(220,35,25)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Material Retreat.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(160,30,10)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/Material Slide View.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(220,35,25)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/iOS Action Sheet.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(280,33,10)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/iOS App Launch.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(320,40,0)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/iOS Keyboard.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(280,33,10)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/iOS Retreat.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(220,28,0)" 5 | """ 6 | -------------------------------------------------------------------------------- /Springs/iOS Slide View.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | curve: "spring(220,28,0)" 5 | """ 6 | -------------------------------------------------------------------------------- /State/Animation Options.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.animationOptions = 5 | curve: "spring(250,25,0)" 6 | """ 7 | -------------------------------------------------------------------------------- /State/Define States.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.states.a = 5 | width: 400 6 | height: 400 7 | 8 | layerA.states.b = 9 | width: 200 10 | height: 200 11 | """ 12 | -------------------------------------------------------------------------------- /State/If Current State Name Then.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | if layerA.states.current.name == "a" 5 | layerB.animate 6 | properties: 7 | opacity: 1 8 | curve: "spring(270,24,10)" 9 | """ 10 | -------------------------------------------------------------------------------- /State/State Cycle.coffee: -------------------------------------------------------------------------------- 1 | plugin.run = (contents, options) -> 2 | """ 3 | #{contents} 4 | layerA.stateCycle(["a", "b"]) 5 | """ 6 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Framer Snippets 2 | 3 | *I built this library to compliment the included snippets library in Framer. These snippets focus on repeated actions and include as little code as possible. It should be quite helpful to beginners who are learning the basic behaviors of Framer, but it should be also be helpful to more experienced users when used as shortcuts.* 4 | 5 | To use - drag the folders into your Framer snippets folder on your local machine: 6 | In Framer, go to snippets > show snippets folder. Drag all of my folders into that folder. 7 | See my YouTube channel for a few demos: 8 | 9 | - [How to use Framer Snippets Library](https://www.youtube.com/watch?v=CgY6fT7HwAw) 10 | - [How to use Special Snippets](https://www.youtube.com/watch?v=p_J0jd-JYZU) 11 | 12 | ![alt tag](http://www.whyamicrazytoday.com/github/snippets.png) 13 | 14 | ## Actions 15 | 16 | A variety of common actions. 17 | 18 | - Click 19 | - Keydown 20 | - Touch Start 21 | - Touch Move 22 | - Touch End 23 | 24 | ## Animate 25 | 26 | A variety of common animation starters. Including scale, opacity, and position. Customize to your needs. 27 | 28 | - Opacity 29 | - Position 30 | - Scale 31 | - Dimensions 32 | - Rotation 33 | - With Delay 34 | 35 | ### Trigger On End 36 | 37 | Included are two ways to trigger an animation on the end of another animation. The formal one should be used when you intend on reusing the animations, the casual one can be used for one off triggering. 38 | 39 | ### Repeating 40 | 41 | This snippet allows you to create an infinite loop of two animations. The 'Halt' snippet will stop the repeating animation. 42 | 43 | ### Slow Motion 44 | 45 | This will allow you view your prototypes in slow motion to more finely tune your animations. 46 | 47 | ## Drag 48 | 49 | - Start 50 | - Move 51 | - End 52 | - Postion 53 | 54 | Use these to trigger events from drag actions. Position reports back the current drag position, use it to trigger events when you drag an object into a trigger area. 55 | 56 | ## Layers 57 | 58 | - Sub Layer 59 | - Video Layer 60 | - Destroy Layer 61 | 62 | ## Layer Properties 63 | 64 | Use these to effect your layers. 65 | 66 | - Blur 67 | - Border 68 | - Center 69 | - Circle Shape 70 | - HTML 71 | - Image 72 | - Name 73 | - Saturation 74 | - Shadow 75 | - Style 76 | - Place Before & Behind 77 | - Bring To Front & Send To Back 78 | 79 | ## Flow Component 80 | 81 | Use these to create a flow. 82 | 83 | - Flow Component 84 | - Show Next/Previous 85 | - Show Next (No transition) 86 | - Show Overlay Center/Left/Right/Notif 87 | - Footer and Header 88 | 89 | ## State 90 | 91 | Use these to setup states. 92 | 93 | - Define States 94 | - State Cycle 95 | - If Current State name is x then y 96 | - Animation Options 97 | 98 | ## Scroll 99 | 100 | ### Position 101 | 102 | Reports back scroll position. You can use this to trigger events that need to occur at certain positions of a scrollLayer. 103 | 104 | ### Direction Lock 105 | 106 | Locks scrolling to one direction at a time 107 | 108 | ### Velocity 109 | 110 | Reports back velocity of scroll. 111 | 112 | ## Simple Click and Touch 113 | 114 | - Click 115 | - Touch Start 116 | - Touch Move 117 | - Touch End 118 | 119 | Very simple click and touch listeners. Use Click when you want immediate feedback. Touch allows more control over the touch event, but has a small delay. 120 | 121 | 122 | ## Other 123 | 124 | ### Delay Utility 125 | 126 | Delays anything. 127 | 128 | ### Device Check 129 | 130 | Checks to see what device the project is being run on. 131 | 132 | ### Project Setup Example 133 | 134 | An organized way to set up your projects. 135 | 136 | ## Spring 137 | 138 | - Fast 139 | - Loose 140 | - Slow 141 | - Variables Setup 142 | 143 | Some starter springs. The variable setup allows you to create reusable springs. Place this at the beginning of your file. 144 | 145 | # Follow me 146 | Twitter: [charliedeets](https://twitter.com/charliedeets) 147 | 148 | Facebook: [robotsecret](https://facebook.com/robotsecret) 149 | --------------------------------------------------------------------------------