Last active
May 27, 2016 17:12
-
-
Save kitze/d63f1c0e2ec6d457f6298c72730651c0 to your computer and use it in GitHub Desktop.
taking js mixins too far
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
export const animateEqual = (properties, ...values) => { | |
const percentIncrease = 100 / (values.length - 1); | |
let result = {}; | |
let percent = 0; | |
_.each(values, value => { | |
let styles = {}; | |
_.each(value, (n, i) => { | |
const prop = properties[i]; | |
styles = _.extend(styles, _.isFunction(prop) ? prop.apply(this, [n]) : {[prop]: n}) | |
}) | |
result = _.extend(result, {[`${percent}%`]: styles}); | |
percent += percentIncrease; | |
}) | |
return result; | |
} |
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
export const zeroOrPx = x => x === 0 ? 0 : `${x}px`; | |
export const translate3DStr = (x = 0, y = 0, z = 0) => `translate3d(${zeroOrPx(x)}, ${zeroOrPx(y)}, ${zeroOrPx(z)})`; | |
export const scaleStr = (x = 0) => `scale(${x})`; | |
export const translate3d = (x = 0, y = 0, z = 0) => ({ | |
transform: translate3DStr(x, y, z) | |
}); | |
export const scale = (x = 0) => ({ | |
transform: scaleStr(x) | |
}); | |
export const translateAndScaleZ = (x = 0, y = 0, z = 0, s = 0) => ({ | |
transform: `${translate3DStr(x, y, z)} ${scaleStr(s)}` | |
}); | |
export const translateAndScale = (x = 0, y = 0, s = 0) => ({ | |
transform: `${translate3DStr(x, y, 0)} ${scaleStr(s)}` | |
}); |
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
import {scale, animateEqual} from 'utils/project'; | |
//instead of this | |
const keyframes = { | |
'0%': { | |
transform: 'scale(1)', | |
opacity: '1' | |
}, | |
'25%': { | |
transform: 'scale(1.15)', | |
opacity: '0.8' | |
}, | |
'50%': { | |
transform: 'scale(1.1)', | |
opacity: '0.7' | |
}, | |
'75%': { | |
transform: 'scale(1.35)', | |
opacity: '0.9' | |
}, | |
'100%': { | |
transform: 'scale(1)', | |
opacity: '1', | |
} | |
} | |
//you can write this | |
const keyframes2 = { | |
...animateEqual( | |
[scale, 'opacity'], | |
[1, 1], | |
[1.15, 0.8], | |
[1.1, 0.7], | |
[1.35, 0.9], | |
[1, 1] | |
), | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment