Arrow Animation

While building a new homepage I wanted the little scroll arrow at the bottom to have some personality. On its own it hops every few seconds. Hover over it and it gets excited and runs through its tricks in a random order. Below are all the ones I tried, numbered for reference. Each plays on a loop; click or tap one to replay it.

01 Hop

900ms, two hops in place with squash and stretch, every 4–6 seconds on its own

02 Somersault

1.5s crouch, 300px loop-the-loop riding the track, squash on landing

03 3D Loop

1.4s loop toward you and away, pitching through it. Didn't make the cut.

04 Orbit

1.7s swing out 160px and round behind, turning to face the way it goes

05 Figure Eight

1.7s figure eight above home, banking and twirling. Didn't make the cut.

06 Rocket

1.6s flip to point up, launch 280px, hang, flip back and fall home

07 Hopscotch

1.6s three hops out and back, rolling over in the middle one

08 Pendulum

1.9s swing from a point 220px up, settling

09 Whirlpool

1.8s two turns, drawn into the middle and flung back out

10 Peekaboo

1.6s spin off into the distance and rush back at you. Didn't make the cut.