famo.us: add an item to main context after an animation completes

Question

I have an animation that takes 1 sec to complete, and then I want to show some text boxes for username/password and a login button. Is there some sort of "oncomplete" event for an animation?

Answer 1

Yes, there most certainly is..

It will be the third argument in your setTransform or equivalent animation function..

Check it out..

EDIT:

I did misunderstand your question. There is no event that is emitted, only the ability to set the completion handler.

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var StateModifier       = require("famous/modifiers/StateModifier");
var Transform           = require("famous/core/Transform");
var Easing              = require("famous/transitions/Easing");

var context = Engine.createContext();

var surface = new Surface({
  size:[200,200],
  properties: { backgroundColor: 'green' }
})

surface.state = new StateModifier({ origin:[0,0.5] });

var completionFunction = function(){ console.log("Complete!"); };

var xOffset = 0;

context.add(surface.state).add(surface);

surface.on('click', function(){
  transition = { duration:1000, curve:Easing.inOutQuad };
  xOffset += 100;
  surface.state.setTransform(Transform.translate(xOffset,0,0),transition, completionFunction )
});

Answer 2

There is no built in 'oncomplete' event, but assuming that you're using some sort of Transitionable, you can do whatever you want via the the callback argument of Transitionable#set:

https://famo.us/docs/0.1.1/transitions/Transitionable/#set

If you prefer to work with events, you can use an EventEmitter to emit one via the callback yourself.