Experiments with Framer Motion

animation

variants

gestures

drag

path

keyframes

motion values

layout 1

layout 2

layoutId 1

💜

layoutId 2

Item 1

Item 2

Item 3

useAnimation

Controlled Animation

useAnimation YoYo

Yo-Yo

useScroll Progress 1

scroll horizontally

an example
an example
an example
an example
an example
an example
an example
an example
an example
an example

useScroll Progress 2

Item 1

example

Item 2

example

Item 3

example

Item 4

example

Item 5

example

Item 6

example

Item 7

example

Item 8

example

Item 9

example

Item 10

example

Item 11

example

Item 12

example

Item 13

example

Item 14

example

Item 15

example
Keyframes Experiments

Scale

Rotate

Radius

Scale

Rotate

Radius

Scale

Rotate

Radius

Scale

Rotate

Radius

Scale

Rotate

Radius

Scale

Rotate

Radius

Duration

Repeat

Repeat Delay