Skip to content

Instantly share code, notes, and snippets.

View jordandobson's full-sized avatar
🥽

Jordan Dobson jordandobson

🥽
128 followers · 187 following
View GitHub Profile
@addisonschultz
addisonschultz / reactchildren.tsx
Last active September 14, 2023 01:15
Cloning React Children
import * as React from "react";
import { Frame, addPropertyControls, ControlType } from "framer";
export function Component({ childComponent }) {
return (
<div style={{ width: "100%" }}>
{React.Children.map(childComponent, (child, index) => {
return React.cloneElement(child, {
width: "100%",
key: index,
@davo
davo / Colors.tsx
Created May 21, 2019 21:38
Reusing Framer X Shared Colors on a Function Component
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 12:13
A hook making it fun to work with the gyroscope
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
}
@assassinave
assassinave / utils-modulate-framerx.tsx
Created December 16, 2018 16:50
Framer X - Utils Modulate
// Framer X Utils.modulate equivalent
function modulate(value, rangeA, rangeB, limit = false) {
const [fromLow, fromHigh] = rangeA;
const [toLow, toHigh] = rangeB;
const result = toLow + ((value - fromLow) / (fromHigh - fromLow)) * (toHigh - toLow);
if (limit === true) {
if (toLow < toHigh) {
if (result < toLow) {
return toLow;
@stakes
stakes / frameless.coffee
Last active April 14, 2017 21:08
Framer.js module to open prototypes in Frameless
# 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 August 29, 2015 14:06
Detect Resize and OS / Device Type
$(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 March 14, 2019 14:11
Framer.js per-transition animationOptions!
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 15:04
QC Spring Value Converter
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 October 21, 2017 05:31
Front end site translations with Siteleaf v2 (http://www.siteleaf.com) and jquery.localize.js (https://github.com/coderifous/jquery-localize).
<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 10:18
Full height background video / image from FiftyThree Paper
Set inline width & height.
Video, img alternative natural width & height: 1920 x 1080
21mb video O_O
http://codepen.io/MikeMcChillin/pen/wKGFz