View Animation

Hi Am creating an Alloy project with some views. I need to animate views back and forth(ie) from one view to another and so on. I tried the following code and not worked,

index.xml
<Alloy>
    <Window id="fblogin" class="container">
        <Require src="loginsuccess" id="loginsuccess"></Require>
        <Require src="loginFailure" id="loginFailure"></Require>
        <Require src="loginPage" id="loginPage"></Require>
    </Window>
</Alloy>
 
loginPage.xml
<Alloy>
    <View class="container">
        <LoginButton ns="Alloy.Globals.Facebook"/>
        <Button title="Google"></Button>
    </View>
</Alloy>
 
loginFailure.xml
<Alloy>
    <View class="container">
        <Label>Login Failed. Please try again later.</Label>
    </View>>
</Alloy>
 
loginsuccess.xml
<Alloy>
    <View class="container">
        <Label>Login Successful</Label>     
    </View>
</Alloy>
 
index.js
 
var animation = require('alloy/animation');
var loginPage = $.loginPage;
var loginsuccess = $.loginsuccess;
var loginFailure = $.loginFailure;
function loginFails(){
    animation.crossFade(loginPage, loginFailure, 500, function(){});
}
function loginSuccess(){
    animation.crossFade(loginPage, loginsuccess, 500, function(){});
}
$.fblogin.open();

Now if I call loginFails() or loginSuccess(), then its showing error because its in controller Index and not in other view controller. How to solve this?