Advanced Animations

In order to help advanced users with a series of samples of possibilities, we’ve created the ‘Expression Playground’ 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 with Facer .

How does this watch face work?

We’ll go through a couple of specific expressions used in the watch face in the recipes below. 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!

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.

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)

🙏 Thanks to wutronic for contributing this tutorial!

Got a tutorial you’d like to share? Send us a note at facer@little-labs.com to contribute it!