Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
key={`s-${i.id}`}
text={i.id}
style={{ background: 'red', width: 100, height: 100 }}
pose={should_flip ? 'flipped' : 'enter'}
onDel={() => this.remove(i)}
onFlip={() => this.flip(i)}
/>
);
})}
);
}
}
const Img = posed.img({
dull: {
filter: 'grayscale(100%) brightness(100%)'
},
coloured: {
filter: 'grayscale(0%) brightness(100%)'
}
});
export const Filter = () => (
<img src="https://popmotion.io/images/dusk.jpg">
);
`;
const Label = styled(
posed.span({
init: { color: '#000' },
drag: { color: '#f00' }
})
)``;
export const DragChildren = () => (
<label>Drag me</label>
);
export const SingleFilter = posed.img({
hoverable: true,
init: { filter: 'blur(2px)' },
hover: { filter: 'blur(0px)' }
});
const DynamicPositionedBox = styled(
posed.div({
move: {
x: () => Math.random() * 200,
y: () => Math.random() * 200
}
})
)`
width: 100px;
height: 100px;
background: hotpink;
}
`;
const MainPagePic = styled(posed.div(fadeEnterConfig))`
position: absolute;
bottom: 0;
right: -10%;
width: 70%;
z-index: -1;
${mediaSize.phone`
width: 105%;
`};
`;
const Logo = posed.img({
enter: {
x: -200,
opacity: 0
},
normal: {
x: 0,
opacity: 1,
transition: { duration: 500 }
}
});
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
iconAnimate: false,