-
-
Save myvome/4ac506add7c6d1259183ea8e5cd1b611 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Transitions | |
# Compiled by @myvo, packaged up by @steveruizok, then an attempt at extending was made by @myvo | |
# | |
# Usage | |
# | |
# - Drop this file in your project's modules folder. | |
# | |
# - At the top of your project, include: | |
# Transitions = require "Transitions" | |
# | |
# - Use the transitions in your flow component: | |
# flow.transition(layer, Transitions.slideOutRight) | |
# | |
# - Advanced (time and curve options): | |
# flow.transition(layer, Transitions.go(Transitions.slideOutRight, time: 1, curve: Bezier.easeOut )) | |
# | |
# - Need to quickly review all the transitions in this module? Try: | |
# print _.keys(Transitions) | |
timing = 0.75 | |
curving = Bezier.easeInOut | |
exports.go = (transition, {time, curve}) -> | |
if time | |
timing = time | |
else | |
timing = 0.75 | |
if curve | |
curving = curve | |
else | |
curving = Bezier.linear | |
return transition | |
exports.switchInstant = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
hide: | |
x:0 | |
y:0 | |
layerB: | |
show: | |
x:0 | |
y:0 | |
hide: | |
x:0 | |
y:0 | |
exports.slideInUp = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:Screen.height | |
options: | |
time: timing | |
curve: curving | |
exports.slideInDown = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:-Screen.height | |
options: | |
time: timing | |
curve: curving | |
exports.slideInLeft = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:-Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
exports.slideInRight = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
exports.slideOutDown = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:Screen.height | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
height: Screen.height | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
height:0 | |
options: | |
time: timing | |
curve: curving | |
exports.slideOutRight = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
width:Screen.width | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
width:0 | |
options: | |
time: timing | |
curve: curving | |
exports.moveInUp = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:-Screen.height | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:Screen.height | |
options: | |
time: timing | |
curve: curving | |
exports.moveInDown = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:Screen.height | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:-Screen.height | |
options: | |
time: timing | |
curve: curving | |
exports.moveInLeft = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:-Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
exports.moveInRight = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:-Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
exports.pushInLeft = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:Screen.width / 2 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
shadowX: 0 | |
shadowColor: 'rgba(0,0,0,0.6)' | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:-Screen.width | |
y:0 | |
shadowX: Screen.width | |
shadowColor: 'rgba(0,0,0,0)' | |
options: | |
time: timing | |
curve: curving | |
exports.pushInRight = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
hide: | |
x:-Screen.width / 2 | |
y:0 | |
layerB: | |
show: | |
x:0 | |
y:0 | |
shadowX: 0 | |
shadowColor: 'rgba(0,0,0,0.6)' | |
hide: | |
x:Screen.width | |
y:0 | |
shadowX: -Screen.width | |
shadowColor: 'rgba(0,0,0,0)' | |
exports.pushOutRight = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerA: | |
show: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:Screen.width | |
y:0 | |
options: | |
time: timing | |
curve: curving | |
layerB: | |
show: | |
x:0 | |
y:0 | |
width:Screen.width | |
shadowX: Screen.width | |
shadowColor: 'rgba(0,0,0,0)' | |
shadowType: 'inner' | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:-Screen.width / 2 | |
y:0 | |
width:Screen.width/2 | |
shadowX: Screen.width | |
shadowColor: 'rgba(0,0,0,0.6)' | |
shadowType: 'inner' | |
options: | |
time: timing | |
curve: curving | |
exports.fadeIn = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerB: | |
show: | |
x:0 | |
y:0 | |
opacity: 1 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
opacity: 0 | |
options: | |
time: timing | |
curve: curving | |
exports.zoomIn = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerB: | |
show: | |
x:0 | |
y:0 | |
scale: 1 | |
opacity: 1 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
scale: .9 | |
opacity: 0 | |
options: | |
time: timing | |
curve: curving | |
exports.zoomOut = (nav, layerA, layerB, overlay) -> | |
transition = | |
layerB: | |
show: | |
x:0 | |
y:0 | |
scale: 1 | |
opacity: 1 | |
options: | |
time: timing | |
curve: curving | |
hide: | |
x:0 | |
y:0 | |
options: | |
time: timing | |
curve: curving |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment