Color transition Framerjs

Question

I want to create a seamless transition between two background colors using Framer.js

I have tried below code which moves the white square 500px and then when it reaches the end it switch instantly to "red". No smooth transition of the color.

Any ideas on how to solve this?

layerA=new Layer()

layerA.states.add
    first: {backgroundColor:"#ffffff"}

layerA.states.add
    second: {backgroundColor:"red",x:500}

layerA.states.switchInstant("first")
layerA.states.switch("second")

Answer 1

State is a wrapper for Animation, and Image is not supported in Animation.

Only numeric layer properties can be animated.

http://framerjs.com/docs/

You can animate layer manually.

or make invisible layer, change state of layer and observe position of layer like layer.on "change:x", (e)-> but undocumentated feature is used carefully

Answer 2

There's currently 2 ways of approaching that:

make 2 layers ( the white one on top of a red one ) and then fade between the 2.

like this:

parentLayer = new Layer
width:400
height:1334
backgroundColor: "#transparent"


testLayerRed = new Layer
    width:400
    height:1334
    backgroundColor: "#FF3300"
    superLayer: parentLayer

testLayer = new Layer
    width:400
    height:1334
    backgroundColor: "#FFFFFF"
    superLayer: parentLayer

#move the layer, then call the transition   
parentLayer.on Events.Click, ->
    parentLayer.animate
        properties: 
            x:350
        curve:"spring(500,50,10)"
    changeBackground()

changeBackground = ->
    # simply fade the top layer
    testLayer.animate
        properties:
            opacity:0
        curve:"spring(200,50,10)"

Or, if by any means you need real tween between colors, you can try an external library like pop motion. I made an example for your here:

http://share.framerjs.com/24o7i2n5d2y8/

Hope this helps!