Matt Perry mattgperry

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Number.toString() #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## pregenerated-keyframe-performance.html
<html>
  <head>
    <title>Pre-generated keyframes performance</title>
    <!--
      This file demonstrates that the performance of pre-generated keyframes is poor in Chrome
      under surprising circumstances.

      Specifically, pre-generated keyframes are fine in isolation. But when combined with a
      requestAnimationFrame animation, AND another WAAPI animation, performance becomes
      (literally) 100x worse.

## useGreensock.js
function useGreensock(callback, deps, optionalScope) {
  const defaultScope = useRef()
  const scope = optionalScope || defaultScope

  useLayoutEffect(() => {
    const context = gsap.context(callback, scope)

    return () => context.revert()
  }, deps)


## TextSplit.tsx
'The animator’s JavaScript toolbox.'.split('').map((character, i) => (
                <TaglineCharacter index={i} key={i} character={character} />
              ))

function TaglineCharacter({ character, index }) {
  const ref = useRef(null);

  useEffect(() => {
    const controls = animate({
      from: 0,

## talk-demo-source.tsx
import {
  AnimatePresence,
  AnimateSharedLayout,
  motion,
  useMotionValue,
  useIsPresent,
} from "framer-motion";
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import { shuffle } from "lodash";

## FullScreenSpaceJump.tsx
import { useEffect } from "react";

function handleSpace(event: KeyboardEvent) {
  if (event.key === " ") {
    event.preventDefault();
    const delta = event.shiftKey ? -window.innerHeight : window.innerHeight;
    window.scrollTo(0, window.scrollY + delta);
  }
}

## pointerEvents.tsx
import { motion, useMotionValue, useTransform } from "framer-motion"

export function Overlay({ isVisible }) {
  const opacity = useMotionValue(0)
  const pointerEvents = useTransform(
    opacity,
    latest => latest < 0.5 ? "none" : "auto"
  )

  return (

## gist:c4d23752a0fae7888596c4ff6d92733a
class MotionValue<T> {
  constructor(public current: T) {}
}

type UnwrapMotionValueArray<V extends MotionValue<any>[]> = { [K in keyof V ]: V[K] extends MotionValue<infer T> ? T : never }

function unwrap<T extends MotionValue<any>[]>(value: [...T]): UnwrapMotionValueArray<typeof value> {
  return value.map(v => v.current) as [...UnwrapMotionValueArray<T>]
}

## useMotionTemplate.ts
import { useEffect } from "react";
import sync from "framesync";
import { useMotionValue, MotionValue } from "framer-motion";

/**
 *  Combine multiple motion values into a new one using a template literal.
 *
 *  Updates in source motion values are batched to once per frame.
 *
 *  ```javascript

## test.ts
  test("drag handlers aren't frozen at drag session start", async () => {
        let count = 0
        const onDragEnd = deferred()
        const Component = () => {
            const [increment, setIncrement] = useState(1)
            return (
                <MockDrag>
                    <motion.div
                        drag
                        onDragStart={() => {
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Number.toString() #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	<html>
	<head>
	<title>Pre-generated keyframes performance</title>
	<!--
	This file demonstrates that the performance of pre-generated keyframes is poor in Chrome
	under surprising circumstances.

	Specifically, pre-generated keyframes are fine in isolation. But when combined with a
	requestAnimationFrame animation, AND another WAAPI animation, performance becomes
	(literally) 100x worse.
	function useGreensock(callback, deps, optionalScope) {
	const defaultScope = useRef()
	const scope = optionalScope \|\| defaultScope

	useLayoutEffect(() => {
	const context = gsap.context(callback, scope)

	return () => context.revert()
	}, deps)
	'The animator’s JavaScript toolbox.'.split('').map((character, i) => (
	<TaglineCharacter index={i} key={i} character={character} />
	))

	function TaglineCharacter({ character, index }) {
	const ref = useRef(null);

	useEffect(() => {
	const controls = animate({
	from: 0,
	import {
	AnimatePresence,
	AnimateSharedLayout,
	motion,
	useMotionValue,
	useIsPresent,
	} from "framer-motion";
	import * as React from "react";
	import { useEffect, useRef, useState } from "react";
	import { shuffle } from "lodash";
	import { useEffect } from "react";

	function handleSpace(event: KeyboardEvent) {
	if (event.key === " ") {
	event.preventDefault();
	const delta = event.shiftKey ? -window.innerHeight : window.innerHeight;
	window.scrollTo(0, window.scrollY + delta);
	}
	}
	import { motion, useMotionValue, useTransform } from "framer-motion"

	export function Overlay({ isVisible }) {
	const opacity = useMotionValue(0)
	const pointerEvents = useTransform(
	opacity,
	latest => latest < 0.5 ? "none" : "auto"
	)

	return (
	class MotionValue<T> {
	constructor(public current: T) {}
	}

	type UnwrapMotionValueArray<V extends MotionValue<any>[]> = { [K in keyof V ]: V[K] extends MotionValue<infer T> ? T : never }

	function unwrap<T extends MotionValue<any>[]>(value: [...T]): UnwrapMotionValueArray<typeof value> {
	return value.map(v => v.current) as [...UnwrapMotionValueArray<T>]
	}
	import { useEffect } from "react";
	import sync from "framesync";
	import { useMotionValue, MotionValue } from "framer-motion";

	/**
	* Combine multiple motion values into a new one using a template literal.
	*
	* Updates in source motion values are batched to once per frame.
	*
	* ```javascript
	test("drag handlers aren't frozen at drag session start", async () => {
	let count = 0
	const onDragEnd = deferred()
	const Component = () => {
	const [increment, setIncrement] = useState(1)
	return (
	<MockDrag>
	<motion.div
	drag
	onDragStart={() => {