const Modal = ({ closeModal, animation, pointerEvents }) => { return ( <div className="modal" style={{ pointerEvents }}> <animated.div className="modal-card" style={animation}> <button onClick={closeModal}>Close</button> <h1>Modal</h1> </animated.div> </div> ); }
const Nav = ({ style }) => { return ( <animated.div className='nav-wrapper' style={style}> <nav> <a href='#'>Home</a> <a href='#'>List</a> <a href='#'>Check</a> <a href='#'>Tuts</a> </nav> </animated.div> ); }
const Anime = ({ fade }) => ( <animated.p style={fade}> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero voluptatibus ullam reiciendis illo eligendi, laboriosam quaerat quisquam quasi fuga natus expedita velit mollitia. Accusamus obcaecati accusantium fugiat culpa, in consequuntur. </animated.p> )
const Gesture = () => ( <motion.button style={styles} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9, x: "-5px", y: "5px" }} > Button </motion.button> )
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 Arrow = props => { const { isOpen, variants } = props; return ( <motion.div animate={isOpen ? "open" : "closed"} variants={variants} transition={{ velocity: 0.5 }} > <img style={{ marginLeft: -5 }} src="img/arrbig.svg" /> </motion.div> ); }
function MoveMe() { const [ moveMe, toggleMoveMe ] = useState(false); const move = useSpring({ transform: moveMe ? 'translate(0,0)' : 'translate(0,150px)' }); return ( <div> <button onClick={() => toggleMoveMe(!moveMe)}>Toggle</button> <animated.h6 style={move}> Going up... </animated.h6> </div> ); }
const Toggle = () => { const [isToggled, setToggle] = useState(false); return ( <motion.div onClick={() => setToggle(!isToggled)} style={styles} animate={isToggled ? "active" : "unActive"} variants={variants} > <span>{isToggled ? "on" : "off"}</span> </motion.div> ); }
const AppContainer = ({ children }) => { const fade = useSpring({ from: { opacity: 0 }, opacity: 1 }); return <animated.div style={fade}>{children}</animated.div>; }
const Modal = ({ closeModal, animation, pointerEvents }) => { return ( <div style={{ pointerEvents }} className='modal'> <animated.div style={animation} className='modal-card'> <button onClick={() => closeModal()}>close</button> <h1>Modal</h1> </animated.div> </div> ); }
const Modal = ({closeModal, animation, pointerEvents}) => { return( <div className="modal" style={{pointerEvents}}> <animated.div style={animation} className="modal-card"> <h1>Modal</h1> <button onClick={closeModal}>Close</button> </animated.div> </div> ) }
const Modal = ({ animation, pointerEvents, closeModal }) => { return ( <div className="modal" style={{ pointerEvents }}> <animated.div className="modal-card" style={animation}> <button onClick={closeModal}>Close Modal</button> <h1>Modal</h1> </animated.div> </div> ) }
const Nav = ({ style }) => { return ( <animated.div className="nav-wrapper" style={style}> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Store</a> <a href="#">Tutorials</a> </nav> </animated.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> ); }
const Nav = ({style}) => { return ( <animated.div className='nav-wrapper' style={style}> <nav> <a href='#'>Home</a> <a href='#'>About</a> <a href='#'>Store</a> <a href='#'>Tutorials</a> </nav> </animated.div> ) }