paulirish

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

kimballfrank

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();

davo

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,

stakes

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);

koenbok

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 })

jonastreub

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

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

aalokt89

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
}

neiljohnston

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"

maxsteenbergen

{
    "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",