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> ) }
const PageWrapper = (props) => { const { isLoading = false, classes = "" } = props; const { children } = props; const _className = isStr(classes) ? [classes] : isArr(classes) ? classes : []; return ( <motion.div variants={config.variants.page} className={classNames(_className)} initial="exit" animate="enter" exit="exitUp" > {isLoading ? <LoadingSquare /> : <> {children} </>} </motion.div> ); }
const Main = () => { const { location } = useRouter(); const transitions = useTransition(location, location => location.key, { from: { opacity: 0, position: "absolute", width: "100%", transform: "translate3d(0, 100vh, 0)" }, enter: { opacity: 1, transform: "translate3d(0, 0, 0)" }, leave: { opacity: 0, transform: "translate3d(0, -100vh, 0)" } }); return transitions.map(({ item, props: transitionStyle, key }) => ( <animated.div key={key} style={transitionStyle}> <Switch location={item}> <Route exact path='/' component={One} /> <Route exact path='/two' component={Two} /> <Route exact path='/three' component={Three} /> </Switch> </animated.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> ); }