Framer.js: Manipulating a layer's animation states through another layer's on-click event?

Question

I'm using framer.js to create a quick mockup, but one thing I need it to do is to animate a layer between two defined states when another layer's on-click event is triggered. This is what I mean:

I have to variables blueBox and redBox, all defined with properties and everything. I need the redBox to animate between two states when blueBox is clicked. The JavaScript I have for that part:

blueBox.on(Events.Click, function(){
    return redBox.states.next("stateA", "stateB"); 
});

Is this not possible in framer.js? I have the relevant states defined in their respective layers. It works if I add the redBox statement to another event that says click on redBox, but is there no way to have a different layer animate by triggering another one?

Thanks in advance!

Answer 1

You have forgotten the square brackets.

blueBox.on(Events.Click, function(){
    return redBox.states.next(["stateA", "stateB"]); 
});