framer-motion#useCycle JavaScript Examples

The following examples show how to use framer-motion#useCycle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: useAnimatedNavToggler.js    From cucoders with Apache License 2.0 6 votes vote down vote up 
//Below logic is for toggling the navbar when toggleNavbar is called. It is used on mobile toggling of navbar.
export default function useAnimatedNavToggler() {
  const [showNavLinks, setShowNavLinks] = useState(false);
  const [x, cycleX] = useCycle("0%", "150%");
  const animation = useAnimation();

  const toggleNavbar = () => {
    setShowNavLinks(!showNavLinks);
    animation.start({ x: x, display: "block" });
    cycleX();
  };

  return {showNavLinks,animation, toggleNavbar }
}
Example #2
Source File: NavMobile.jsx    From pooltogether-landing-site with MIT License 6 votes vote down vote up 
NavMobile = (props) => {
  const [isOpen, toggleOpen] = useCycle(false, true)
  const containerRef = useRef(null)
  const { height } = useDimensions(containerRef)

  return <>
    <motion.nav
      initial={false}
      animate={isOpen ? 'open' : 'closed'}
      custom={height}
      ref={containerRef}
      className={classnames(
        'flex items-center justify-center sm:hidden z-40 fixed h-full w-full',
        {
          'pointer-events-none': !isOpen
        }
      )}
      style={{ 
        right: 0,
        bottom: 0,
      }}
    >
      <motion.div className='mobile-nav-background' variants={sidebar} />
      
      <NavMobileList
        toggleOpen={toggleOpen}
      />
      <NavMobileMenuToggle toggle={() => toggleOpen()} />
    </motion.nav>
  </>
    
}
Example #3
Source File: Nav.js    From fellowship-program-website with MIT License 5 votes vote down vote up 
Nav = ({ hasShadow }) => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "favicon.png" }) {
        childImageSharp {
          fixed(height: 40) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  const [isOpen, toggleOpen] = useCycle(false, true)
  const containerRef = useRef(null) // TODO is this needed?

  return (
    <StyledNav
      className={hasShadow ? "nav-shadow" : ""}
      initial="closed"
      animate={isOpen ? "open" : "closed"}
      ref={containerRef}
    >
      <div>
        <NavLinkMain to="/">
          <NavLogo
            fixed={data.file.childImageSharp.fixed}
            alt="Ethereum Foundation Fellowship Program Logo"
          />
          <NavLogoText>Fellowship Program</NavLogoText>
        </NavLinkMain>
      </div>
      {/* Desktop */}
      <NavLinks>
        {navItems.map((item, idx) => {
          return (
            <NavLink to={item.to} key={idx}>
              {item.text}
            </NavLink>
          )
        })}
      </NavLinks>
      {/* Mobile */}
      <MobileNavBackground variants={backgroundVariants} />
      <AnimatePresence>
        {isOpen && (
          <MobileNavLinks
            navItems={navItems}
            key="navigation"
            toggle={() => toggleOpen()}
          />
        )}
      </AnimatePresence>
      <MobileNavMenu toggle={() => toggleOpen()} />
    </StyledNav>
  )
}