Skip to content

Instantly share code, notes, and snippets.

View perrysmotors's full-sized avatar

Giles Perry perrysmotors

View GitHub Profile
@maxsteenbergen
maxsteenbergen / framerapp.webmanifest
Last active April 17, 2024 17:16
How to enable fullscreen prototype previews with Framer (Sites)
{
"name": "Framer Fullscreen Prototype",
"short_name": "Framer",
"description": "A fullscreen Framer prototype as PWA",
"start_url": "https://fullscreen-prototype.framer.website",
"scope": "https://fullscreen-prototype.framer.website",
"display": "fullscreen",
"orientation": "any",
"theme_color": "#ffffff",
"background_color": "#ffffff",
@neiljohnston
neiljohnston / FontAwesomeFont.tsx
Last active May 16, 2022 15:16
Include Font Awesome in Framer as a Code Component
import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"
async function importScripts() {
let script = document.createElement("script")
script.id = "font-awesome-fonts-script"
// create a fontawesome kit: https://fontawesome.com/start
script.src = "https://kit.fontawesome.com/KIT_ID_HERE.js"
script.crossOrigin = "anonymous"
@aalokt89
aalokt89 / Icon.tsx
Last active February 6, 2022 01:07
Framer x icon component
mport * as React from "react"
import { Frame, useCycle, addPropertyControls, ControlType } from "framer"
// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api
interface Props {
iconName: string
tint: string
}
@koenbok
koenbok / TabBar.tsx
Created May 15, 2019 18:49
Tab Bar
import * as React from "react"
import { Frame, Stack } from "framer"
function capitalize(name) {
// Capitalizes a word: feed -> Feed
return name.charAt(0).toUpperCase() + name.slice(1)
}
function Button({ title, active, onTap }) {
const opacity = active ? 1 : 0.35
@jonastreub
jonastreub / useToken.ts
Last active April 2, 2019 15:40
Share values among components using a hook
import * as React from "react"
// Share values among components using a hook. The values are available using an identifier.
// There are currently three types of build-in tokens:
// - useNumberToken
// - useStringToken
// - useBooleanToken
// - useObjectToken
// - useArrayToken
@koenbok
koenbok / store.ts
Last active November 10, 2023 00:17
import * as React from "react";
/**
A hook to simply use state between components
Warning: this only works with function components (like any hook)
Usage:
// You can put this in an central file and import it too
const useStore = createStore({ count: 0 })
import { Data, animate, Override, Animatable } from "framer";
const data = Data({ scaleValues: [] });
export const Scale: Override = props => {
data.scaleValues.push({ id: props.id, scaleValue: Animatable(1) });
return {
scale: getValueForId(props.id),
onTap() {
let valueToScale = getValueForId(props.id);
import * as React from 'react'
import { Frame, PropertyControls, ControlType } from 'framer'
interface Props {
color: string
}
export class componentName extends React.Component<Props> {
static defaultProps = {
width: 1600,
function distortLayer(layer, shearHorizontallyBy, shearVerticallyBy) {
var shearVerticallyBy = shearVerticallyBy || 0;
if(!layer.isKindOfClass(MSShapeGroup)) return;
var path=layer.bezierPathWithTransforms();
var transform=DKDistortionTransform.transformWithInitialRect(layer.frame().rect());
transform.shearHorizontallyBy(shearHorizontallyBy);
transform.shearVerticallyBy(shearVerticallyBy);
var nextPath = transform.transformBezierPath(path);
layer.setBezierPath(nextPath);
doc.reloadInspector();

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am