Skip to content

Instantly share code, notes, and snippets.

Avatar

Jordan Dobson jordandobson

View GitHub Profile
@davo
davo / Colors.tsx
Created May 21, 2019
Reusing Framer X Shared Colors on a Function Component
View Colors.tsx
import * as React from 'react'
import { Stack, Frame } from 'framer'
import { colors } from './canvas'
export function Colors() {
const [colorsTokens] = React.useState(() => {
return Object.keys(colors).map(key => colors[key])
})
return (
@jonastreub
jonastreub / useGyro.ts
Created May 12, 2019
A hook making it fun to work with the gyroscope
View useGyro.ts
import { useState, useEffect } from "react"
interface WorldOrientation {
/** A number representing the motion of the device around the z axis, expressed in degrees with values ranging from 0 to 360. */
alpha: number
/** A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 to 180. This represents a front to back motion of the device. */
beta: number
/** A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 to 90. This represents a left to right motion of the device. */
gamma: number
}
@stakes
stakes / frameless.coffee
Last active Apr 14, 2017
Framer.js module to open prototypes in Frameless
View frameless.coffee
# Add the following line to your project in Framer Studio.
# `frameless = require "frameless"`
frameless = {}
# Directly opens the prototype in Frameless
frameless.open = ->
intent = "frameless://"
url = intent + window.location.host + window.location.pathname + "/"
window.location.replace url
@jordandobson
jordandobson / - Detect Resize
Last active Aug 29, 2015
Detect Resize and OS / Device Type
View - Detect Resize
$(window).bind('resize', function(){
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size.indexOf("break2") !=-1){
// Do stuff for breakpoint 2
} else if (size.indexOf("tablet") !=-1){
// Do stuff for tablet
@elliottkember
elliottkember / stateAnimationOptions.coffee
Last active Mar 14, 2019
Framer.js per-transition animationOptions!
View stateAnimationOptions.coffee
myLayer.states.stateAnimationOptions =
'a-b':
time: 0.1
'b-c':
time: 0.8
'c-d':
time: 0.5
myLayer.states.add
a: opacity: 1
@koenbok
koenbok / qc-framer.js
Created May 14, 2014
QC Spring Value Converter
View qc-framer.js
var QcValueConverter = {
tensionFromQcValue: function(qcValue) {
return (qcValue - 30.0) * 3.62 + 194.0;
},
qcValueFromTension: function(tension) {
return (tension - 194.0) / 3.62 + 30.0;
},
frictionFromQcValue: function(qcValue) {
@sskylar
sskylar / default.html
Last active Oct 21, 2017
Front end site translations with Siteleaf v2 (http://www.siteleaf.com) and jquery.localize.js (https://github.com/coderifous/jquery-localize).
View default.html
<html>
<body>
<h1 data-localize="{{page.id}}.title">{{page.title}}</h1>
<div data-localize="{{page.id}}.body">
{{content}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
@MikeMcChillin
MikeMcChillin / Full Height & width background video or image
Last active May 31, 2017
Full height background video / image from FiftyThree Paper
View Full Height & width background video or image
Set inline width & height.
Video, img alternative natural width & height: 1920 x 1080
21mb video O_O
http://codepen.io/MikeMcChillin/pen/wKGFz
@marcedwards
marcedwards / high-dpi-media.css
Last active Apr 4, 2021
A CSS media query that captures almost all high DPI aware devices.
View high-dpi-media.css
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@irae
irae / _Stay_standalone.md
Last active Jan 15, 2021 — forked from kylebarrow/example.html
Stay Standalone: Prevent links in standalone web apps opening Mobile Safari
View _Stay_standalone.md

#Stay Standalone

A short script to prevent internal links to a "webapp" added to iPhone home screen to open in Safari instead of navigating internally.