Blog

UX Design

Day 10 - Framer Challenge

State Cycle. States. Default Animations. Used Framer's Fiber UI Kit as the basis of this prototype. When you click on the green toggle, it will animate on and off. 

To use a set of default animations for all animations, use 

Framer.Defaults.Animation =

To make animations feel native, use Spring curves.

  • Use "damping" which means bounciness.

    • 0.1 was too schizophrenic.

    • 1 was too flat.

    • 0.7 was good.

  • The "time" property means how long it takes for the animation from start to finish.

    • 0.1 was too fast

    • 1 was too slow

    • 0.7 was good

This is what I ended up using for the Default Animation:

Framer.Defaults.Animation =  curve: Spring(damping: 0.5)   time: 1