How to animate a sublayer on click in Framer.js?

Question

I am trying to animate a sublayer in Framer.js on click. What I get is "Uncaught TypeError: layerD.on is not a function".

Am I doing something wrong or animating sublayers is not possible in Framer?

Here's the code:

# Create a background
new BackgroundLayer backgroundColor: "#28affa"

# Create layers
layerC = new Layer
backgroundColor: "#fff"
width: 300
height: 100

layerD = new Layer
backgroundColor: "#2889fa"
width: 150
height: 100

layerD.superLayer = layerC

# Position layers
layerC.center()
layerD = layerC.minX

# Click Event
layerD.on Events.Click, ->
  layerD.animate
    properties:
      x: this.x + 50
    curve: "ease"
    time: 1

Answer 1

When you position the layers you assign a number to the layerD variable. You probably wanted to set the minX of layerD instead of assigning the minX value of layerC to layerD.

Fixed Example