> ## Content Index
> Fetch the complete content index at: https://news.facer.io/llms.txt
> Use this file to discover other available public pages before exploring further.

# Advanced Animations
- URL: https://news.facer.io/advanced-animations/
- Published: 2017-09-08T20:33:46.000Z
- Updated: 2026-02-22T17:06:09.000Z
- Description: In order to help advanced users with a series of samples of possibilities, we’ve created the ‘Expression Playground’ watch face. This watch…
- Author: Facer
- Tags: Tutorials

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 .

The Expression Playground watch face

---

### 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](https://www.facer.io/watchface/1WkGlWDQzf/inspect?ref=news.facer.io)

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**](https://www.facer.io/u/wutronic?ref=news.facer.io) for contributing this tutorial!

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