Utils.modulate example

bg = new BackgroundLayer
    backgroundColor: "#56B4D3"

box = new Layer
    borderRadius: 10
    backgroundColor: "#7b4397"
    opacity: 1

box.center()
box.draggable.enabled = true

originX = box.midX
originY = box.midY

dist = 0


box.on Events.DragMove, ->
    delta =
        x: originX- Events.touchEvent(event).clientX
        y: originY - Events.touchEvent(event).clientY

    dist = Math.abs(delta.x) + Math.abs(delta.y)

    # dist is the value that we will be adapting
    # 0 - 400 represents the range of that value
    # 1 - 0.6 represents the range that we wish to adapt it to
    # the boolean sets whether the new value should be limited to the range set
    # or whether it can continue outside it
    #
    # the greater the dist value, the smaller the scale we want
    boxScale = Utils.modulate(dist,[0,400],[1, 0.6], true)

    # here we do the same with the opacity, adapting the diff value differently
    boxOpacity = Utils.modulate(dist,[0,400],[1, 0.5], true)


    box.scale = boxScale
    box.opacity = boxOpacity



#when the user has stopped dragging we animate the box to return to its original position
box.on Events.DragEnd, ->
    box.animate({

        properties: {
            midX: originX
            midY: originY
            scale: 1
            opacity: 1
        }
        time: 0.3
        curve: "spring(200, 40, 0)"

    })