const Trail = () => { const [ on, toggle ] = useState(false); const trail = useTrail(items.length, { opacity: on ? 0 : 1, transform: on ? 'scale(0.3)' : 'scale(1)' }); return ( <div className="boxes-grid"> <button onClick={() => toggle(!on)}>Toggle</button> {trail.map((animation, idx) => <animated.div key={idx} className="box" style={animation} />)} </div> ); }
createReactClass({ // Will be called with the params from the route URL (the post ID) statics: { fetchData: db.getPost, }, render: function() { var post = this.props.data return div(null, h1(null, post.title), p(null, post.body), p(null, a({href: '/', onClick: this.props.onClick}, '< Grumblr Home')) ) }, })
const Gesture = () => { const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] })); const bind = useGesture(({ down, delta }) => { set({ xy: down ? delta : [0, 0] }); }); return ( <animated.div style={{ transform: xy.interpolate((x, y) => `translate3d(${x}px, ${y}px, 0)`) }} {...bind()} className="box" /> ); }
render() { return ( <Transition native items={this.props.show} from={{ overflow: 'hidden', width: '0%' }} enter={{ width: '100%' }} leave={{ width: '0%' }} config={{ duration: this.props.duration, delay: this.props.delay }} > {show => show && (props => <animated.div style={props}>{this.props.text}</animated.div>)} </Transition> ) }
export default function Simple() { const [props, set] = useSpring(() => ({ x: 0, y: 0, scale: 1 })) const bind = useDrag(({ down, movement: [x, y] }) => { set({ x: down ? x : 0, y: down ? y : 0, scale: down ? 1.2 : 1 }) }) // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-) return ( <div className="simple flex-content"> <animated.div {...bind()} style={props} /> </div> ) }
export default function Wheel() { const [{ clampY, localY }, set] = useSpring(() => ({ clampY: 0, localY: 0 })) const bind = useWheel( ({ first, local: [, ly], delta: [, dy], memo = clampY.getValue() }) => { set({ clampY: clamp(dy + memo, -500, 500), localY: ly, immediate: true }) return memo } ) return ( <div className="wheel" {...bind()}> <animated.div>{clampY}</animated.div> <animated.div>{localY}</animated.div> </div> ) }
const Nav = ({ navAnimation }) => { return ( <animated.div style={navAnimation} className="nav-wrapper"> <nav> <a href="https://www.dankreiger.com">Home</a> <a href="https://www.dankreiger.com">About</a> <a href="https://www.dankreiger.com">Store</a> <a href="https://www.dankreiger.com">Tutorials</a> </nav> </animated.div> ); }