const Modal = ({ title, isVisible, toggle, children }) => {
const containerStyles = { display: isVisible ? '' : 'none' };
const motionStyle = {
y: spring(isVisible ? 0 : 150),
opacity: spring(isVisible ? 1 : 0),
};
return (
<Motion style={ motionStyle }>
{ ({ y, opacity }) => {
return (
<aside style={ containerStyles }
className="fixed top-0 left-0 right-0 vh-100 flex items-center justify-center z-4 bg-black-60">
<div style={ getModalStyles(y, opacity) }
className="w-100 w-75-m w-50-ns bg-white Modal">
<header className="bg-blue white flex items-center pv3 justify-center">
<h3 className="w-100 ma0 bold tc truncate ttu tracked">{ title }</h3>
<button className="bg-blue bn white pr4"
onClick={ toggle }>✖︎</button>
</header>
<div className="overflow-scroll ph4">
{ children }
</div>
</div>
</aside>
);
}}
</Motion>
);
};
const BasicModal = ({ title, size, children }, { onCloseModal }) => (
<Motion
defaultStyle={{ translateY: -30, scale: 1.02 }}
style={{ translateY: spring(0), scale: spring(1) }}
>
{interpolated =>
<div
className={cx(styles.basic, styles[size])}
style={{
transform: `translateY(${interpolated.translateY}px) scale(${interpolated.scale})`,
}}
>
<Card>
<div className={styles.header}>
{title}
<span className={styles.close} onClick={onCloseModal}>
×
</span>
</div>
<div className={styles.body}>
{children}
</div>
</Card>
</div>
}
</Motion>
);
{players.map((player) => {
return (
<li key={player.participantId}>
<div className='player-icon float-left'>
<img src={`//ddragon.leagueoflegends.com/cdn/6.8.1/img/champion/${player.championName}.png`} />
</div>
<div className='player-details float-left'>
<div className='player-name'> {player.summonerName} </div>
<div className='player-health'>
<Motion style={{width: spring((player.h / player.maxHealth) * 100)}}>
{(style) => (<div className='health-bar' style={{ width: style.width + '%'}}></div>)}
</Motion>
<span className='health-text'> {player.h} / {player.maxHealth} </span>
</div>
<div className='player-health'>
<Motion style={{width: spring((player.p / player.maxPower) * 100)}}>
{(style) => (<div className='health-bar mana-bar' style={{ width: style.width + '%'}}></div>)}
</Motion>
<span className='health-text'> {player.p} / {player.maxPower} </span>
</div>
<div className='player-items'>
{filterItems(player.items, player.summonerName)}
</div>
</div>
<div className='player-details player-details-right float-left'>
{player.kills} / {player.deaths} / {player.assists} <br />
{player.mk} CS / {Math.round(player.mk / (data.t / 1000 / 60) * 10)} CS per 10 <br />
{player.cg} Gold / {player.tg} Total Gold <br />
{team.teamDamageToChampions !== 0 ? Math.round(player.tdc / team.teamDamageToChampions * 100) : 0}% of Team's Damage
</div>
</li>
)
})}
pageWillLeave: function() {
// ReactDOM.findDOMNode(this.previousPage).className += " page-leave";
// Don't do any animation if we're transitioning out of the payment flow,
if ( this.props.pageName === 'LandingPage' ||
this.props.pageName === 'ThanksPage' ||
this.props.pageName === 'ErrorPage'
)
{
return { x: 0 }
}
const oldPage = ReactDOM.findDOMNode(this.previousPage)
// oldPage.style.height = oldPage.clientHeight
oldPage.className += " page-leave"
// if ( !oldPage.style.height ) {
oldPage.style.height = oldPage.offsetHeight + 'px'
// }
// Transition pages offscreen, measured by the width of the window
const endingPosition = window.innerWidth
return {
x: this.props.direction === 'next' ? spring(-endingPosition, {stiffness: 160, damping: 20}) : spring(endingPosition, {stiffness: 160, damping: 20})
}
},
render() {
const defaultStyle = {
borderRadius: 10,
t: 0,
opacity: 0.8
};
const endStyle = {
borderRadius: this.state.hover ?
spring(40, {stiffness: 200, damping: 20}) :
spring(10, {stiffness: 200, damping: 20}),
t: this.state.hover ?
spring(1, {stiffness: 200, damping: 20}) :
spring(0, {stiffness: 200, damping: 20}),
opacity: 0.8
};
return (
<Motion defaultStyle={defaultStyle} style={endStyle}>
{interpolatingStyle => {
const color = colorInterpolation(this.props.colorOrigin, this.props.colorEnd, interpolatingStyle.t);
return (
<button style={Object.assign({background: color }, this.props.style, interpolatingStyle)}
onClick={this.props.onClick}
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}>
{this.props.children}
</button>
);
}}
</Motion>
);
}
export const nodeWillLeave = springConfig => ({ data }) => ({
scale: spring(0, springConfig),
r: spring(0, springConfig),
x: spring(data.x, springConfig),
y: spring(data.y, springConfig),
...interpolateColor(data.color, springConfig),
})
willLeave = (styleCell) => {
return {
...styleCell.style,
opacity: spring(0, leavingSpringConfig),
scale: spring(2, leavingSpringConfig),
};
};
const getStyles = (children, pathname) => ({
[pathname]: {
children,
opacity: spring(1),
scale: spring(1),
},
});
{range(itemsCount).map(i => {
const style = originalPosOfLastPressed === i && isPressed
? {
scale: spring(1.1, springConfig),
shadow: spring(16, springConfig),
y: mouseY,
}
: {
scale: spring(1, springConfig),
shadow: spring(1, springConfig),
y: spring(order.indexOf(i) * 100, springConfig),
};
return (
<Motion style={style} key={i}>
{({scale, shadow, y}) =>
<div
onMouseDown={this.handleMouseDown.bind(null, i, y)}
onTouchStart={this.handleTouchStart.bind(null, i, y)}
className="demo8-item"
style={{
boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`,
transform: `translate3d(0, ${y}px, 0) scale(${scale})`,
WebkitTransform: `translate3d(0, ${y}px, 0) scale(${scale})`,
zIndex: i === originalPosOfLastPressed ? 99 : i,
}}>
{order.indexOf(i) + 1}
</div>
}
</Motion>
);
})}
{({ isLoading, user }) =>
<Motion
defaultStyle={{
opacity: 0,
rotate: 50,
zoom: 80
}}
style={{
opacity: spring(isLoading ? 0 : 100, { stiffness: 160, damping: 50 }),
rotate: spring(isLoading ? 30 : 0, { stiffness: 150, damping: 30 }),
zoom: spring(isLoading ? 80 : 100)
}}>
{({ opacity, rotate, zoom }) =>
<div style={{ display: 'flex', justifyContent: 'flex-end', padding: '20px 30px'}}>
<div className='UserProfile'>
<span className='UserProfile__name' style={{ opacity: opacity / 100 }}>{`${user.firstName} ${user.lastName}`}</span>
<img
className='UserProfile__pic'
src={user.photo50}
style={{
transform: `rotate(${rotate}deg) scale(${zoom / 100})`,
opacity: opacity
}} />
</div>
</div>
}
</Motion>
willLeave(key, valOfKey) {
return {
...valOfKey,
opacity: spring(0, {stiffness: 60, damping: 15}),
scale: spring(2, {stiffness: 60, damping: 15})
};
}
return tiles.map(tile => {
return (
<Motion
key={'motion_' + tile.id}
defaultStyle={{x: tile.x * 125, y: tile.y * 125}}
style={{x: spring(tile.x * 125), y: spring(tile.y * 125)}}
>
{motionVal => {
return (
<div
key={tile.id}
className="tile"
style={{
top: motionVal.y,
left: motionVal.x,
background: backgrounds[tile.value],
color: fontColors[tile.value],
}}
>
<b>{tile.value}</b>
</div>
);
}}
</Motion>
);
});
transform: Object.keys(this.state.transform).reduce((acc, key) => {
acc[key] = {
x: spring(0, this.props.springConfig),
y: spring(0, this.props.springConfig),
}
return acc
}, {})
const AnimatedGameteView = ({id, initialDisplay, display, animStiffness=100, onRest, ...others}) => {
const group = id % 4,
rotationForGroup = group * 90,
initial = initialDisplay || display,
initialSize = initial.size || 30,
initialRotation = initial.rotation != null ? initial.rotation : rotationForGroup,
initialOpacity = initial.opacity != null ? initial.opacity : 1.0,
finalSize = display.size || 30,
finalRotation = display.rotation != null ? display.rotation : rotationForGroup,
finalOpacity = display.opacity != null ? display.opacity : 1.0,
springConfig = { stiffness: animStiffness };
return (
<Motion className='geniblocks animated-gamete'
defaultStyle={{
x: initial.x, y: initial.y, size: initialSize,
rotation: initialRotation, opacity: initialOpacity
}}
style={{
x: spring(display.x, springConfig),
y: spring(display.y, springConfig),
size: spring(finalSize, springConfig),
rotation: spring(finalRotation, springConfig),
opacity: spring(finalOpacity, springConfig)
}}
onRest={onRest} >
{
interpolatedStyle =>
<GameteView id={id} display={interpolatedStyle} {...others} />
}
</Motion>
);
};
render () {
let {descriptor, fill, arc, text, outerRadius, active} = this.props
const inline = {
textAnchor: 'middle',
alignmentBaseline: 'middle'
}
return (
<Motion style={{val: active ? spring(outerRadius) : spring(outerRadius - 20)}}>
{style => {
descriptor.outerRadius = style.val
return (
<g onMouseOver={this.props.onMouseOver} onMouseOut={this.props.onMouseOut}>
<path d={arc(descriptor)} fill={fill} />
<text
dy='0.35em'
style={inline}
transform={`translate(${arc.centroid(descriptor)})`}
>
{text}
</text>
</g>
)
}}
</Motion>
)
}
function ReactMotionAnimationExample({isZoomed}) {
return (
<Motion style={{
left: spring(isZoomed ? 1 : 1),
right: spring(isZoomed ? 2 : 3)
}}>
{
({left, right}) =>
<XYPlot
animation={false}
width={300}
height={300}
xDomain={[left, right]}
>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<MarkSeries
data={[
{x: 1, y: 10},
{x: 2, y: 5},
{x: 3, y: 15}
]}/>
</XYPlot>
}
</Motion>
);
}
getWillLeave(key, style) {
if (key == 'shader') return {
left : spring(this.fullwidth)
}
if (key == 'content') return {
right : spring(this.fullwidth)
}
}
getWillEnter(key) {
if (key == 'shader') return {
left : spring(this.fullwidth)
}
if (key == 'content') return {
right : spring(this.fullwidth)
}
}
willLeave() {
const { windowWidth } = this;
return {
opacity: spring(0),
scale: spring(0),
x: spring(-1 * windowWidth)
};
}
willLeave() {
return {
height: spring(0),
opacity: spring(0),
padding: spring(0),
marginBottom: spring(0)
};
}
styles={labels.map(label => ({
key: label.id,
data: label,
style: {
x: spring(label.x, springConfig),
y: spring(label.y, springConfig),
},
}))}
child => ({
key: `t${counter++}`,
data: {element: child},
style: {
opacity: spring(OPACITY_TARGET, ANIMATION),
y: spring(TRANSLATEY_TARGET * counter, ANIMATION)
}
}));
willLeave(exited) {
const { style } = exited;
return {
opacity: spring(0, springConfig),
x: spring(_.get(style, ['x', 'val'], style.x), springConfig),
y: spring(_.get(style, ['y', 'val'], style.y), springConfig),
};
}
willLeave() {
const { defaultY } = this.props;
const shrinkOut = spring(0, springConfig);
return {
height: shrinkOut,
median: spring(defaultY, springConfig),
opacity: shrinkOut,
};
}
willLeave() {
const { defaultY, meanHeight } = this.props;
const shrinkOut = spring(0, springConfig);
return {
y: spring(defaultY, springConfig),
height: spring(meanHeight, springConfig),
opacity: shrinkOut,
};
}
styles={variable.densityBins.map(bin => ({
key: `${bin.id}`,
data: bin,
style: {
r: spring(bin.size / 2, springConfig),
cx: spring(axis === 'y' ? otherPosition : bin.position, springConfig),
cy: spring(axis === 'y' ? bin.position : otherPosition, springConfig),
},
}))}
const Menu = ({open, LinkOveride, data, categoryOnHover, categoryToggle, toggleMenu}) => {
return (
<div className='Menu'>
<Motion style={{
transform: open ? spring(100, presets.gentle) : spring(0, presets.gentle)
}}>
{
({transform}) => (
<div style={[base, {
transform: `translate(${100 - transform}%, 0%)`
}]}>
<StaggeredMotion
defaultStyles={data.map( () => ({transform: 100}))}
styles={
(styles) => styles.map( (style, index) =>
( index === 0 ?
{transform: open ? spring(0, presets.gentle) : spring(100, presets.gentle)} :
{transform: spring(styles[index-1].transform, presets.gentle) }
)
)
}
>
{
(styles) => (
<div>
{
data.map(({name, link, open, border, hover, submenu}, index) => (
<Category
style={{
transform: `translate(${styles[index].transform}%, 0%)`
}}
toggleMenu={toggleMenu}
open={open}
name={name}
link={link}
border={border}
hover={hover}
key={index}
submenu={submenu}
index={index}
LinkOveride={LinkOveride}
onClick={categoryToggle(index)}
onMouseOver={categoryOnHover(index)}
onMouseOut={categoryOnHover(index)} />
) )
}
</div>
)
}
</StaggeredMotion>
</div>
)
}
</Motion>
</div>
);
};
return todos.map(item => {
return {
key: item.id.toString(),
data: item,
style: {
height: spring(60),
opacity: spring(1)
}
};
});
initialChildButtonStyles() {
return {
width: CHILD_BUTTON_DIAM,
height: CHILD_BUTTON_DIAM,
top: spring(this.props.mainButtonPos[1] - (CHILD_BUTTON_DIAM/2), SPRING_CONFIG),
left: spring(this.props.mainButtonPos[0] - (CHILD_BUTTON_DIAM/2), SPRING_CONFIG),
rotate: spring(-180, SPRING_CONFIG),
scale: spring(0.5, SPRING_CONFIG)
};
}
return this.props.cities.map(city => {
return {
data: city,
key: `${city.id}`,
style: {
y: spring(0, presets.wobbly),
opacity: spring(1, presets.wobbly)
}
};
});