Intro

Framer

Paths

Playground

SVG Path Playground

Square

Small Wave

Spiral

Yin Yang

Peace Symbol

Floating Circles

Timing Playground

Timing Functions:

none

anticipate

backIn

backOut

backInOut

circIn

circOut

circInOut

easeIn

easeOut

easeInOut

Speed:

too slow

slowish

normal

fastish

fast

too fast

Circle Movement:

circle count:

23

0

100

min duration:

5

0

100

max duration:

23

0

100

max delay:

5

0

20

min movements:

4

0

40

max movements:

8

0

40

min radius:

5

0

500

max radius:

50

0

500

horizontal min:

5

-500

500

horizontal max:

200

-500

500

vertical min:

1

-500

500

vertical max:

5

-500

500

this

Fun with Floating Circles

Advanced Animation:

animatedBorder

bouncy

none

Advanced Animation:

min anim duration:

2

0

100

max anim duration:

5

0

100

min bouncy scale:

0.5

0.1

20

max bouncy scale:

2

0.1

20

border opacity:

1

0

1

min border width:

0.8

0

20

max border width:

8

0

10

max border delay:

2

0

10

border color