Skip to content

Instantly share code, notes, and snippets.

@bwalkin

bwalkin/code.js Secret

Created February 24, 2015 09:24
Show Gist options
  • Save bwalkin/6ae3958fd39f3518e71c to your computer and use it in GitHub Desktop.
Save bwalkin/6ae3958fd39f3518e71c to your computer and use it in GitHub Desktop.
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;
};
@mokross
Copy link

mokross commented Feb 4, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment