Skip to content

Instantly share code, notes, and snippets.

@bwalkin bwalkin/code.js Secret
Created Feb 24, 2015

Embed
What would you like to do?
Javascript Code Exported from Origami
var springSystem = new rebound.SpringSystem();
springSystem.addListener({
onAfterIntegrate: function(springSystem) {
updateLayers();
}
});
// photoZoom transition
var photoZoomSpring = springSystem
.createSpringWithBouncinessAndSpeed(7, 2)
.addListener({onSpringUpdate: setPhotoZoomProgress});
var photoZoom = function(on) {
photoZoomSpring.setEndValue(on ? 1 : 0);
};
var setPhotoZoomProgress = function(progress) {
var alpha = transition(progress, 1, 0);
layers.story.opacity = alpha;
var scale = transition(progress, 0.4797, 0.55);
layers.photo.scale = scale;
var yPosition = transition(progress, -186, 0);
layers.photo.yPosition = yPosition;
var scale2 = transition(progress, 1, 0.97);
layers.story.scale = scale2;
var rotation = transition(progress, 0, 30);
layers.photo.zRotation = rotation;
};
// fade transition
var fadeSpring = springSystem
.createSpringWithBouncinessAndSpeed(15, 2)
.addListener({onSpringUpdate: setFadeProgress});
var fade = function(on) {
fadeSpring.setEndValue(on ? 1 : 0);
};
var setFadeProgress = function(progress) {
var alpha2 = transition(progress, 1, 0.3);
layers.photo.opacity = alpha2;
};
// Hook up variables to dom elements here
var layers = {
story: {
domElement: null
}
photo: {
domElement: null
}
};
// Utilities
var transition = function(progress, startValue, endValue) {
return rebound.MathUtil.mapValueInRange(progress, 0, 1, startValue, endValue);
};
var updateLayers = function() {
for (var name in layers) {
var layer = layers[name];
var el = layer.domElement;
el.style.width = layer.width + 'px';
el.style.height = layer.height + 'px';
el.style.opacity = layer.opacity;
transform(el, layer.xPosition, layer.yPosition, layer.scale, layer.zRotation);
}
};
var transform = function(el, xlatX, xlatY, scale, rot) {
xlatX = typeof xlatX === 'undefined' ? 0 : xlatX;
xlatY = typeof xlatY === 'undefined' ? 0 : xlatY;
scale = typeof scale === 'undefined' ? 1 : scale;
rot = typeof rot === 'undefined' ? 0 : rot;
var xfrm =
'translate3d(' + xlatX + 'px, ' + xlatY + 'px, 0px) ' +
'scale3d(' + scale + ', ' + scale + ', 1) ' +
'rotate(' + rot + 'deg)';
el.style.mozTransform = el.style.msTransform =
el.style.webkitTransform = el.style.transform = xfrm;
};
@jwebcat

This comment has been minimized.

Copy link

commented Feb 26, 2015

how does one export code like this?

All I can get it to export is the utility functions

@hamzazar

This comment has been minimized.

Copy link

commented Sep 6, 2015

How we use that code for a html page?

@wrt

This comment has been minimized.

Copy link

commented Oct 10, 2015

@ankchdry

This comment has been minimized.

Copy link

commented Feb 2, 2016

This link redirect us to origami site and doesn't provide any info. Please provide the right one. @wrt

@mokross

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.