function _createHuts() {
var hut = new ImageSurface ({
size : [700, 700],
content: 'animation-assets/yurt-1.svg'
});
var placeHut = new StateModifier ({
align : [0.5, 0.5],
origin : [0.3, 0.5],
transform: Transform.scale(0, 0, 1),
// sets inital opacity to 0
opacity: 0
});
this.add(placeHut).add(hut);
// animates x- and y-scale to 1
placeHut.setTransform(
Transform.scale(1, 1, 1),
{ duration : 1000, curve: Easing.outBack }
);
// animates opacity to 1
placeHut.setOpacity(1, {
duration: 1000, curve: Easing.outBack
});
var chickens = new ImageSurface ({
size : [150, 150],
content: 'animation-assets/chickens.svg'
});
var placeChickens= new StateModifier ({
align : [0.35, 0.8],
origin : [0.9, 0.3],
// sets initial x- and y-scale to be 0
transform: Transform.scale(0, 0, 1),
// sets inital opacity to 0
opacity: 0
});
var bringToFront = new StateModifier();
bringToFront.setTransform(Transform.inFront);
this.add(placeChickens).add(bringToFront).add(chickens);
// animates x- and y-scale to 1
placeChickens.setTransform(
Transform.scale(1, 1, 1),
{ duration : 1000, curve: Easing.outBack }
);
// animates opacity to 1
placeChickens.setOpacity(1, {
duration: 1000, curve: Easing.outBack
});
}
function _createHuts() {
var hut = new ImageSurface ({
size : [700, 700],
content: 'animation-assets/yurt-1.svg'
});
var placeHut= new StateModifier ({
align : [-2.5, 0.5],
origin : [0.3, 0.5],
opacity: 0
});
placeHut.setTransform(Transform.behind);
this.add(placeHut).add(hut);
var chickens = new ImageSurface ({
size : [150, 150],
content: 'animation-assets/chickens.svg'
});
var placeChickens= new StateModifier ({
align : [-2.7, 0.7],
origin : [0.4, 0.0],
opacity : 0,
transform: Transform.behind
});
this.add(placeChickens).add(chickens);
var maya = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/anc-trimester1.svg'
});
var placeMaya= new StateModifier ({
align : [-2.8, 0.55],
origin: [0.4, 0.0],
opacity: 0
});
this.add(placeMaya).add(maya);
placeMaya.setTransform(
Transform.translate(300, 0, 0)
);
//Move huts, chickens, and Maya into position for the next scene.
setTimeout(function(){
placeMaya.setOpacity(1),
placeMaya.setAlign([.2, 0.55], {duration : 2000, curve: 'easeOut'}),
placeChickens.setOpacity(1),
placeChickens.setAlign([.3, 0.7], {duration : 2000, curve: 'easeOut'}),
placeHut.setOpacity(1),
placeHut.setAlign([.5, 0.5], {duration : 2000, curve: 'easeOut'})
}, 1000);
}
createTransitionNodes: function(){
var duration = this.transitionDuration;
var views = this._getViews();
var transitionIn = null;
var transitionOut = null;
var nodeIn = null;
var nodeOut = null;
var transforms = this._isPush ? this.getPushTransforms() : this.getPopTransforms();
var requireModifier = false;
var animationHandler = this._prepareModification(duration, requireModifier);
if(views.currentView){
transitionOut = new StateModifier({
transform: transforms.transitionOutStart
});
transitionOut.setTransform(
transforms.transitionOutEnd,
{duration: duration, curve: Easing.outQuad}
);
views.nextView.context = this.container.context;
nodeOut = new RenderNode();
nodeOut.add(transitionOut).add(views.currentView);
}
transitionIn = new StateModifier({
transform: transforms.transitionInStart
});
transitionIn.setTransform(
transforms.transitionInEnd,
{duration: duration, curve: Easing.outQuad},
animationHandler.callback
);
views.nextView.context = this.container.context;
nodeIn = new RenderNode();
nodeIn.add(transitionIn).add(views.nextView);
return {
currentView: nodeOut,
nextView: nodeIn,
complete: animationHandler.deferred
};
}
// Sets steps animations
function goToNext() {
titleModifier.setTransform(
Transform.translate(0, -window.innerHeight, 0),
{ duration : 2000, curve: 'easeInOut' }
);
iconModifier.setTransform(
Transform.translate(0, -window.innerHeight, 0),
{ duration : 2000, curve: 'easeInOut' }
);
adfabModifier.setTransform(
Transform.translate(0, 0, 0),
{ duration : 2000, curve: 'easeInOut' }
);
bubbleView.removeCircleField();
}
Isotope.prototype.renderCol = function renderCol(x,y,col) {
if (col instanceof Block) {
var stateModifier = new StateModifier();
stateModifier.setTransform(
Transform.translate(x, y, 0),
{ duration : 1000, curve: 'easeInOut' }
);
// Good for debugging layout without animations
// var positionModifier = new StateModifier({
// transform: Transform.translate(x, y, 0)
// });
return this.add(stateModifier).add(col.background);
}
var offset = y;
var row;
for (var i = 0; i < col.storage.length; i++) {
row = col.storage[i];
this.renderRow.call(this,x,offset,row);
offset += row.height;
}
}
function createWit1() {
var wit1 = new Surface({
size: [20, 20],
content: 'wit1',
properties: {
fontSize:'12px',
color: 'white',
textAlign: 'center',
backgroundColor: '#8a0000'
}
});
var witMod = new StateModifier({
transform: Transform.translate(25, 25, 0)
});
mainContext.add(witMod).add(wit1);
witMod.setTransform(
Transform.translate(150, 150, 0),
{ duration : 1000, curve: 'easeInOut' }
);
}
function _createHuts() {
var health_center = new ImageSurface ({
size : [400, 500],
content: 'animation-assets/rural-clinic-gold.svg'
});
var place_health_center= new StateModifier ({
align : [0.5, 0.5],
origin : [0.5, 0.5],
// sets initial x- and y-scale to be 0
transform: Transform.scale(0, 0, 1),
// sets inital opacity to 0
opacity: 0
});
this.add(place_health_center).add(health_center);
// animates x- and y-scale to 1
place_health_center.setTransform(
Transform.scale(1, 1, 1),
{ duration : 1000, curve: Easing.outBack }
);
// animates opacity to 1
place_health_center.setOpacity(1, {
duration: 1000, curve: Easing.outBack
});
}
AnimationController.prototype.initialize = function(pageView) {
var fadeOutModifier = new StateModifier();
fadeOutModifier.setTransform(Transform.behind);
fadeOutModifier.setOpacity(0, {
duration: 1000, curve: Easing.outBack
});
var sendToBackModifier = new StateModifier();
sendToBackModifier.setTransform(Transform.behind);
sendToBackModifier.setOpacity(1, {
duration: 1000, curve: Easing.outBack
});
renderController = new RenderController(null, sendToBackModifier, fadeOutModifier, false);
pageView.layout.content.add(renderController);
}
define(function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [100, 100],
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
var stateModifier = new StateModifier();
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(100, 300, 0),
{ duration : 1000, curve: Easing.inOutBack }
);
});
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();
var deltaX=7, rectCount=200;
var rectWidth=rectCount, rectHeight=rectCount;
var color="", colors=["#FF0000","#0000FF"];
for(var x=0; x<rectCount/2; x+=deltaX) {
color = colors[x%2];
var surface = new Surface({
size: [rectCount-x, rectCount-x],
properties: {
left: "100px",
top: "100px",
backgroundColor: color,
lineHeight: (rectCount-x)+"px"
}
});
var stateModifier = new StateModifier();
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(100, 100, 0),
{ duration : 5000, curve: 'easeInOut' }
);
}
});
var getBubbleModifier = function (d, i) {
var modifier = new StateModifier({
align: [0, 0],
origin: [0.5, 0.5]
});
modifier.setTransform(
Transform.translate(d.x + 2000, d.y + margins.t, d.depth + 2),
{ duration : 0 , curve: Easing.inOutElastic }
);
modifier.setTransform(
Transform.translate(d.x + margins.l, d.y + margins.t, d.depth + 2),
{ duration : i * 30 + 30, curve: Easing.inOutElastic }
);
return modifier;
};
function _createLalitaAndMaya() {
var maya = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/anc-trimester1.svg'
});
var placeMaya= new StateModifier ({
align : [0.2, 0.55],
origin: [0.4, 0.0]
});
var bringToFront = new StateModifier();
bringToFront.setTransform(Transform.inFront);
this.add(placeMaya).add(bringToFront).add(maya);
placeMaya.setTransform(
Transform.translate(300, 0, 0),
{duration: 2000, curve: 'easeInOut'}
);
var lalita = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/chw-female-side-left.svg'
});
var placeLalita= new StateModifier ({
align : [1.2, 0.55],
origin: [0.4, 0.0]
});
var bringToFront = new StateModifier();
bringToFront.setTransform(Transform.inFront);
this.add(bringToFront).add(placeLalita).add(lalita);
placeLalita.setTransform(
Transform.translate(-570, 0, 0),
{duration: 2000, curve: 'easeInOut'}
);
}
define(function(require, exports, module) {
var Easing = require('famous/transitions/Easing');
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();
var basePointX = 300;
var basePointY = 200;
var currentX = 0;
var currentY = 0;
var offsetX = 0;
var offsetY = 0;
var radius = 0;
var spiralCount = 4;
var Constant = 200;
var angle = 0;
var deltaAngle = 2;
var maxAngle = 721;
var rectWidth=60, rectHeight=60;
var offsetX=0, offsetY=0, index=0;
var color="", colors=["#FF0000","#FFFF00","#FF00FF","#0000FF"];
var hexArray = new Array('0','1','2','3','4','5','6','7',
'8','9','a','b','c','d','e','f');
for(angle=1; angle<maxAngle; angle+=deltaAngle) {
radius = Constant*Constant/angle;
offsetX = radius*Math.cos(angle*Math.PI/180);
offsetY = radius*Math.sin(angle*Math.PI/180);
currentX = basePointX+offsetX;
currentY = basePointY-offsetY;
// alternate between red and blue
index = Math.floor(angle/deltaAngle);
color = '#' + hexArray[index%hexArray.length] +'00';
var surface = new Surface({
size: [rectWidth, rectHeight],
properties: {
left: currentX+"px",
top: currentY+"px",
backgroundColor: color
}
});
var stateModifier = new StateModifier();
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(100, 100, 0),
{ duration : 5000, curve: 'easeInOut' }
);
}
});
function _createLalita() {
var lalita = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/chw-female-side-left.svg'
});
var placeLalita= new StateModifier ({
align : [-1.8, 0.55],
origin: [0.4, 0.0],
opacity: 0
});
placeLalita.setTransform(
Transform.translate(-570, 0, 0)
);
this.add(placeLalita).add(lalita);
var phone = new ImageSurface ({
size : [25,25],
content: 'animation-assets/phone_logo.svg'
});
var placePhone = new StateModifier ({
align : [1.2, 0.55],
origin: [0.4, 0.0],
opacity: 0
});
placePhone.setTransform(
Transform.translate(-585, 15, 0)
);
//Move in Lalita and then add her cell phone.
setTimeout(function(){
placeLalita.setOpacity(1),
placeLalita.setAlign([1.2, 0.55], {duration : 2000, curve : 'easeOut'}),
setTimeout(function(){placePhone.setOpacity(1, {duration : 1000, curve: 'easeInOut'})}, 2000);
}, 1000);
this.add(placePhone).add(phone);
}
var move = function() {
if(timer > 0) {
var sign1 = Math.random() < .5 ? -1 : 1;
var sign2 = Math.random() < .5 ? -1 : 1;
startCenter.setTransform(
Transform.translate(600 * Math.random() * sign1, 300 * Math.random() * sign2, 0),
{ duration: 500, curve: 'easeInOut'}
);
}
};
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();
var rectWidth=50, rectHeight=50, sign=1,topY=0;
var basePointX=0, basePointY=250;
var offsetX=0, offsetY=0, maxHeight=100;
var deltaX=7, rectCount=500, Amp=150;
var color="", colors=["#FF0000","#0000FF"];
for(var x=0; x<rectCount; x+=deltaX) {
color = colors[x%2];
offsetX = basePointX+x;
offsetY = basePointY+(x%maxHeight);
sign = Math.floor(x/maxHeight)%2;
if(sign == 0) {
topY = offsetY;
} else {
topY = basePointY+maxHeight-(x%maxHeight);
}
var surface = new Surface({
size: [rectWidth, rectHeight],
properties: {
left: offsetX+"px",
top: offsetY+"px",
backgroundColor: color
}
});
var scale1 = new StateModifier({
origin: [0.2,0.2],
transform: Transform.scale(2, 0.5, 0.3)
});
var rotateZ45 = new StateModifier({
origin: [0.2,0.2],
transform: Transform.rotateZ(-Math.PI/4)
});
var stateModifier = new StateModifier();
mainContext.add(stateModifier).add(rotateZ45).add(scale1).add(surface);
stateModifier.setTransform(
Transform.translate(100, 100, 0),
{ duration : 5000, curve: 'easeInOut' }
);
}
});
window.onscroll = function(){
//INTRO
//trigger intro animation if container height is past trigger intro height
if(getCurrentContainerHeight() > heightToTriggerIntro && !transCalled) {
//halt any trans to avoid duplicate calls if trans isnt finished
moveTvOnOffStage.halt();
moveTvOnOffStage.setTransform(Transform.translate(110,100,0), spring);
transCalled = true;
transOutCalled = false;
}
//OUTRO
//trigger outro animation if container height is past trigger outro height
if(getCurrentContainerHeight() < heightToTriggerOutro && !transOutCalled) {
//halt any trans to avoid duplicate calls if trans isnt finished
moveTvOnOffStage.halt();
moveTvOnOffStage.setTransform(Transform.translate(-250,-250,0), spring);
transCalled = false;
transOutCalled = true;
}
//SET SCROLLING TO CHANGE CONTAINER SIZE
//if you have passed the target point + padding and the container height and distance travelled is less than the max
if(window.pageYOffset + padding > targetPosition && getCurrentContainerHeight() + distanceTravelledPastTarget() < maxHeight) {
//set height of container to current height + distance travelled past target point
document.getElementById('famous-container').style.height = containerHeightStart + distanceTravelledPastTarget() +"px";
}
}
function _createHari() {
var hari = new ImageSurface ({
size : [500, 240],
content: 'animation-assets/nurse.svg'
});
var placeHari = new StateModifier ({
align: [0.0, 0.5],
origin: [0.0, -0.2]
});
var bringToFront = new StateModifier();
bringToFront.setTransform(Transform.inFront);
this.add(placeHari).add(bringToFront).add(hari);
placeHari.setTransform(
Transform.translate(700, 0, 0),
{duration: 2000, curve: 'easeInOut'}
);
}
function _createMaya() {
var maya = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/anc-trimester3.svg'
});
var placeMaya= new StateModifier ({
align : [-0.2, 0.55],
origin: [0.4, 0.0],
opacity: 1
});
var mayaClinic = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/anc-trimester3.svg'
});
var placeMayaClinic= new StateModifier ({
align : [-0.2, 0.55],
origin: [0.4, 0.0],
opacity: 0,
transform: Transform.translate(500, 0, 0),
});
var bringToFront = new StateModifier();
bringToFront.setTransform(Transform.inFront);
this.add(placeMayaClinic).add(bringToFront).add(mayaClinic);
this.add(placeMaya).add(maya);
setTimeout(function(){
placeMaya.setTransform(
Transform.translate(900, 0, 0),
{duration: 2500, curve: 'easeInOut'})
}, 1000);
setTimeout(function(){
placeMaya.setOpacity(0,{duration: 1000, curve: 'easeInOut'})
}, 3500);
setTimeout(function(){
placeMayaClinic.setOpacity(1,{duration: 1000, curve: 'easeInOut'})
}, 3500);
setTimeout(function(){
placeMayaClinic.setTransform(
Transform.translate(800, 0, 0),
{duration: 2000, curve: 'easeInOut'})
}, 3500);
}
window.onscroll = function(){
if(startPositionDiv < window.pageYOffset + initPadding) {
console.log(document.getElementById('start-container').style.height)
initRotate.setTransform(Transform.rotate(getFirstDistanceTraveled()/150,-getFirstDistanceTraveled()/150,0))
console.log(getFirstDistanceTraveled(), 'width position: ', getWidthPercentage());
if(getWidthPercentage() > 0 && getWidthPercentage() < 100){
document.getElementById('start-container').style.width = getWidthPercentage()*startContainerWidth +"px";
}
}
// 221-2
// 2=100%
// 162 =50%
// x= 50%
// 221 = 0%
// if(getFirstDistanceTraveled() > 100){
// document.getElementById('start-container').style.display = 'none';
// }
if( window.pageYOffset + initPadding < startPositionDiv){
document.getElementById('start-container').style.display = "block"
}
if(getContainerHeight() > 200 && !transCalled) {
transCalled = true;
transOutCalled = false;
}
if(getContainerHeight() < 85 && !transOutCalled) {
transCalled = false;
transOutCalled = true;
}
// bgmodifier.setTransform(Transform.translate(0,distanceTravelled()/4,-1))
// bgmodifier2.setTransform(Transform.translate(0,-distanceTravelled()/4,-2))
//if you have passed the target point(+ padding) and the container height and distance travelled is less than the max
if(window.pageYOffset + padding > targetPosition && getContainerHeight() + distanceTravelled() < maxHeight) {
//set height of container to current height + distance travelled past target point
document.getElementById('famous-container').style.height = containerHeight + distanceTravelled() +"px";
}
}
bubble.on('mouseover', function (e) {
var newX, newY, text;
text = d.make + "<br/>" + d.model.slice(0,20) + "<br/>MPG: " + d.comb + "<br/>" + d.trany.slice(0,21);
tooltipSurface.setContent(text);
tooltipSurface.setProperties({display: 'inline'});
newX = d.x - (tooltip.w / 2);
newY = d.y - tooltip.h - 20;
tooltipModifier.setTransform(
Transform.translate(newX, newY, 40),
{ duration : 50, curve: 'linear' }
);
this.setProperties({
backgroundColor: '#C0B5B2'
});
});
define(function(require, exports, module) {
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 mainContext = Engine.createContext();
var rectWidth=50, rectHeight=80;
var basePointX=-100, basePointY=0;
var offsetX=0, offsetY=0;
var deltaX=1, maxAngle=720, Amp=80;
var color="", colors=["#FF0000","#0000FF"];
for(var x=0; x<maxAngle; x+=deltaX) {
color = colors[x%2];
offsetX = basePointX+x;
offsetY = basePointY+Amp*Math.sin(x*Math.PI/180);
var surface = new Surface({
size: [rectWidth, rectHeight],
properties: {
left: offsetX+"px",
top: offsetY+"px",
backgroundColor: color
}
});
var rotateZ45 = new StateModifier({
origin: [0.2,0.2],
transform: Transform.rotateZ(Math.PI/4)
});
var stateModifier = new StateModifier();
mainContext.add(stateModifier).add(rotateZ45).add(surface);
stateModifier.setTransform(
Transform.translate(100, 100, 0),
{ duration : 5000, curve: 'easeInOut' }
);
}
});
function _createClinic() {
var health_center = new ImageSurface ({
size : [400, 500],
content: 'animation-assets/rural-clinic-gold.svg'
});
var place_health_center= new StateModifier ({
align : [0.5, 0.5],
origin : [0.5, 0.5],
});
var bringToBack = new StateModifier();
bringToBack.setTransform(Transform.behind);
this.add(place_health_center).add(bringToBack).add(health_center);
setTimeout(function(){
place_health_center.setOpacity(0, {duration: 1000})
}, 3500);
}
bubble.on('mouseover', function (e) {
var newX, newY;
if (d.depth > 1) {
tooltipSurface.setProperties({display: 'inline'});
var text = d.make + "<br/>" + d.model.slice(0,20) + "<br/>MPG: " + d.comb + "<br/>" + d.trany.slice(0,21);
tooltipSurface.setContent(text);
newX = d.x + margins.l - (tooltip.w / 2) + d.r;
newY = d.y + margins.t - tooltip.h - 20;
tooltipModifier.setTransform(
Transform.translate(newX, newY, 10),
{ duration : 50, curve: Easing.outCirc }
);
this.setProperties({
backgroundColor: '#C0B5B2'
});
}
});
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [100, 100],
content: 'ball',
properties: {
color: 'black',
textAlign: 'center',
// backgroundColor: '#FF0000',
borderRadius:'100px'
}
});
surface.on("click", function(){
stateModifier.setTransform(
Transform.translate(0, 100, 0),
{ duration : 800, curve: Easing.inBounce}
);
});
var stateModifier = new StateModifier({
origin: [0.5, 0]
});
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(0, 400, 0),
{ duration : 100, curve: Easing.outBounce}
);
});
define(function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
properties: {
backgroundColor: '#FA5C4F'
}
});
var stateModifier = new StateModifier({
size: [200, 200],
origin: [0.5, 0.5],
align: [0.5, 0.5],
// sets initial x- and y-scale to be 0
transform: Transform.scale(0, 0, 1),
// sets inital opacity to 0
opacity: 0
});
mainContext.add(stateModifier).add(surface);
// animates x- and y-scale to 1
stateModifier.setTransform(
Transform.scale(1, 1, 1),
{ duration : 2000, curve: Easing.outBack }
);
// animates opacity to 1
stateModifier.setOpacity(1, {
duration: 2000, curve: Easing.outBack
});
});
this.each(function () {
var $children = $(this.children).css('visibility', 'hidden');
var isotopeOpts = {};
isotopeOpts.items = $children;
ObjectHelpers.extend(isotopeOpts, options);
Engine.setOptions({
appMode: false
});
var mainContext = Engine.createContext(this);
var isotope = new Isotope(isotopeOpts);
//mainContext.add(appView);
//app.add(isotope);
View.apply(this, arguments);
var positionModifier = new StateModifier({
transform: Transform.translate(0, 0, 0)
});
var stateModifier = new StateModifier();
stateModifier.setTransform(
Transform.translate(50, 50, 0),
{ duration : 1000, curve: 'easeInOut' }
);
mainContext.add(this).add(positionModifier).add(stateModifier).add(isotope);
isotopes.push(isotope);
$children.detach();
});
function _createNurse() {
var nurse = new ImageSurface ({
size : [250, 250],
content: 'animation-assets/nurse.svg'
});
var placeNurse = new StateModifier ({
align : [-0.2, 0.55],
origin: [0.4, 0.0],
transform: Transform.translate(1000, -50, 0),
opacity: 0
});
var bringToFront = new StateModifier();
bringToFront.setTransform(Transform.inFront);
this.add(placeNurse).add(bringToFront).add(nurse);
setTimeout(function(){
placeNurse.setOpacity(1,{duration: 1000, curve: 'easeInOut'})
}, 3500);
}
define(function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [100, 100],
content: 'click me to halt',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
var stateModifier = new StateModifier({
origin: [0.5, 0]
});
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(0, 300, 0),
{ duration : 8000, curve: 'linear' }
);
surface.on('click', function() {
stateModifier.halt();
surface.setContent('halted');
});
});
bannerMod.setTransform(Transform.rotate(0, .5, 0), spring, function(){
bannerMod.setTransform(Transform.rotate(0,0,0),spring)
});