Facer Documentation logo

In order to help advanced users with a series of samples of possibilities, we've created the 'Kitchen Sink' watch face. This watch face isn't very useful for telling time, but you can use Inspection Mode to see how we achieve certain animations and effects here at Facer HQ.

You can open the watch in inspector mode to see how it all works: https://www.facer.io/watchface/1WkGlWDQzf/inspect Feel free to make changes, nothing will get saved so you're free to play!

We'll go through a couple of specific expressions used in the watch face:

Fade In / Fade Out

These recipes cover 3 behaviors: Fade in when the watch wakes up, Fade out when the watch wakes up, or Fade In/Out on a loop. Note: To see the fade in & fade out elements in our sample, you'll need to toggle between Active/Dim mode while the time machine is running at normal speed.


Recipe for Fade In When the Watch Wakes:

Property: Transparency
((interpAccel(#DWE#, 0, 2, 2)*100))


Recipe for Fade Out When the Watch Wakes:

Property: Transparency
(100-(interpAccel(#DWE#, 0, 2, 2)*100))


Recipe for Looping Fade In & Fade Out:

Property: Transparency
((sin(#DWE#*5))*50+50)


Pendulum Motion

Allow an element to move as if swinging from a string


Recipe for Pendulum Motion:

Property: Rotation (sin(#DWE#*2)*50)


"Breathing" Motion

Have an element cycle properties easing in & out, to create a 'breathing' effect


Recipe for Breathing Opacity:

Property: Transparency ((sin(#DWE#*2)*60)+50)


Recipe for Breathing Size:

Property: Radius ((sin(#DWE#*2)*40)+50)


Basic Orbit

Orbit an element in a circular motion


Recipe for Basic Orbit:

Property: X Position (160 + sin(#DWFSS#/4)*50)

Property: Y Position (160 + cos(#DWFSS#/4)*50)