Skip to content

Commit

Permalink
Merge pull request #2511 from framer/feature/optimised-interpolate
Browse files Browse the repository at this point in the history 
Optimisations
  • Loading branch information
@mergetron
mergetron[bot] committed Feb 13, 2024
2 parents 20090f5 + 24af5ee commit 6694ccd
Show file tree
Hide file tree
Showing 40 changed files with 891 additions and 282 deletions.
56 changes: 56 additions & 0 deletions dev/benchmarks/mix-array-framer-motion.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../packages/framer-motion/dist/dom.js"></script>
<script>
const { mix } = window.Motion

/**
* Create an interpolate function that mixes unit values.
*/
const mixer = mix(
[100, "50vh", "100px", "#fff"],
[0, "0vh", "0px", "#000"]
)
const numRuns = 1000000
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
mixer(i / numRuns)
}

const finish = performance.now() - startTime
console.log(`Total time: ${finish}ms`)
</script>
</body>
</html>
53 changes: 53 additions & 0 deletions dev/benchmarks/mix-array-greensock.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../node_modules/gsap/dist/gsap.js"></script>
<script>
/**
* Create an interpolate function that mixes unit values.
*/
const px = gsap.utils.interpolate(
[100, 100, 100, 100],
[0, 0, 0, 0]
)

const numRuns = 1000000
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
px(i / numRuns)
}
console.log(`First run: ${performance.now() - startTime}ms`)
</script>
</body>
</html>
56 changes: 56 additions & 0 deletions dev/benchmarks/mix-color-value-framer-motion.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../packages/framer-motion/dist/dom.js"></script>
<script>
const { interpolate, mixColor } = window.Motion

/**
* Create an interpolate function that mixes unit values.
*/
const mixer = interpolate(
[0, 1],
["rgba(255, 255, 255, 0)", "rgba(0, 0, 0, 0)"]
)
const numRuns = 10
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
console.log(mixer(i / numRuns))
}

const finish = performance.now() - startTime
console.log(`Total time: ${finish}ms`)
</script>
</body>
</html>
53 changes: 53 additions & 0 deletions dev/benchmarks/mix-color-value-greensock.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../node_modules/gsap/dist/gsap.js"></script>
<script>
/**
* Create an interpolate function that mixes unit values.
*/
const px = gsap.utils.interpolate(
"rgba(255, 255, 255, 0)",
"rgba(0, 0, 0, 0)"
)

const numRuns = 10
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
console.log(px(i / numRuns))
}
console.log(`First run: ${performance.now() - startTime}ms`)
</script>
</body>
</html>
57 changes: 57 additions & 0 deletions dev/benchmarks/mix-complex-value-framer-motion.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../packages/framer-motion/dist/dom.js"></script>
<script>
const { mix } = window.Motion

/**
* Create an interpolate function that mixes unit values.
*/
const mixer = mix(
"rgba(255, 255, 255, 0) 100px 40% 20px rgba(255, 255, 255, 0) var(--test) 67% 20vh 1vw",
"rgba(0, 0, 0, 0) 0px 0% 100px rgba(255, 255, 255, 0) var(--test) 45% 0vh 1vw"
)

const numRuns = 100000
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
mixer(i / numRuns)
}

const finish = performance.now() - startTime
console.log(`Total time: ${finish}ms`)
</script>
</body>
</html>
53 changes: 53 additions & 0 deletions dev/benchmarks/mix-complex-value-greensock.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../node_modules/gsap/dist/gsap.js"></script>
<script>
/**
* Create an interpolate function that mixes unit values.
*/
const px = gsap.utils.interpolate(
"rgba(255, 255, 255, 0) 100px 40% 20px rgba(255, 255, 255, 0) var(--test) 67% 20vh 1vw",
"rgba(0, 0, 0, 0) 0px 0% 100px rgba(255, 255, 255, 0) var(--test) 45% 0vh 1vw"
)

const numRuns = 10
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
px(i / numRuns)
}
console.log(`First run: ${performance.now() - startTime}ms`)
</script>
</body>
</html>
53 changes: 53 additions & 0 deletions dev/benchmarks/mix-number-value-framer-motion.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<html>
<!--
Mix unit value: Framer Motion
This benchmark mixes simple unit values.
-->
<head>
<style>
body {
padding: 0;
margin: 0;
}

.container {
padding: 100px;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.container > div {
width: 100px;
height: 100px;
}

.box {
width: 10px;
height: 100px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="../../packages/framer-motion/dist/dom.js"></script>
<script src="../../node_modules/gsap/dist/gsap.min.js"></script>
<script>
const { mix } = window.Motion

/**
* Create an interpolate function that mixes unit values.
*/
const px = mix(0, 100)

const numRuns = 100000000
let startTime = performance.now()
for (let i = 0; i < numRuns; i++) {
px(i / numRuns)
}
console.log(`First run: ${performance.now() - startTime}ms`)
</script>
</body>
</html>
Loading

0 comments on commit 6694ccd

Please sign in to comment.