framer-motion#motion JavaScript Examples

AboutPage = (props) => {
  const containerVariants = {
    hidden: {
      opacity: 0,
      x: 100,
    },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        delay: 0.5,
        duration: 0.5,
      },
    },
    exit: {
      x: "-100vw",
      transition: { ease: "easeInOut" },
    },
  };

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
      About Page
    </motion.div>
  );
}

Container = styled(motion.section)`
	padding-top: 140px;
	padding-bottom: 100px;
	padding-left: 170px;
	padding-right: 170px;
	margin: 0px auto;
	max-width: 1600px;
	min-height: 100vh;
	color: white;
	overflow: hidden;
	font-family: 'Asap', sans-serif;
	@media only screen and (max-width: 450px) {
		padding-left: 23px;
		padding-right: 23px;
		min-height: auto;
		max-width: auto;
		padding-top: 50px;
		padding-bottom: 100px;
	}
`

export default function Layout({ children, className, style }) {
    return (
        <div className="layout-menu overflow-x-hidden">
            <LateralMenu />
            <motion.div
                className={`h-full lg:w-layout w-full flex flex-col justify-start lg:px-8 px-2 py-5 ${className}`}
                style={style}
                exit={{ opacity: 0 }}
                initial="initial"
                animate="animate"
            >
                <Header />

                {children}
                <Footer />
            </motion.div>
        </div>
    );
}

export default function MotionContainer({ open, children, ...other }) {
  return (
    <Box
      component={motion.div}
      initial={false}
      animate={open ? 'animate' : 'exit'}
      variants={varWrapEnter}
      {...other}
    >
      {children}
    </Box>
  );
}

MainNavItem = motion.custom(styled(Link)`
  ${tw`relative text-indigo-900 border-b border-transparent hover:text-indigo-900 ml-0 sm:ml-8 mt-3 sm:mt-0`};
  width: max-content;

  &.active {
    ${tw`border-pink-500`};
  }

  &:before {
    ${tw`absolute w-full bg-pink-500 h-px left-0 invisible`};
    content: '';
    bottom: -1px;
    transform: scaleX(0);
    transition: 0.2s;
  }

  &:hover:before {
    ${tw`visible`};
    transform: scaleX(1);
  }
`)

export default function Home() {
  return (
    <Layout>
        <div className="flex flex-grow items-center">
            <div className="w-full">
                <div className="container flex mx-auto justify-center">
                    <motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
                        <h1 className="md:text-6xl text-3xl font-bold">
                          Hi there, I'm <span className="text-rose-500">Robert S.</span>
                        </h1>
                        <p className="text-gray-200 text-lg font-medium">
                            Developer & Tech enthusiast
                        </p>
                    </motion.div>
                </div>
            </div>
        </div>
    </Layout>
  )
}

Path = props => (
  <motion.path
    fill="transparent"
    strokeWidth="3"
    stroke="hsl(0, 0%, 18%)"
    strokeLinecap="round"
    {...props}
  />
)

ActivityBar = (props) => {
    const { socialLinks, theme, setTheme } = props;

    const setMode = () => {
        const mode = theme === 'dark' ? 'light' : 'dark';
        setTheme(mode);
    }

    return (
        <Wrapper>
            <motion.ul
                initial="hidden"
                animate="visible"
                variants={List}
            >
                <Link title="Resume" variants={Item} whileHover={{ scale: 1.2 }} href={socialLinks.resume} target="_blank">
                    <Resume />
                </Link>
                <Link title="Linkedin" variants={Item} whileHover={{ scale: 1.2 }} href={socialLinks.linkedin} target="_blank">
                    <Linkedin />
                </Link>
                <Link title="Twitter" variants={Item} whileHover={{ scale: 1.2 }} href={socialLinks.twitter} target="_blank">
                    <Twitter />
                </Link>
                <Link title="Github" variants={Item} whileHover={{ scale: 1.2 }} href={socialLinks.github} target="_blank">
                    <Github />
                </Link>
                <Link title="Export as PDF" variants={Item} whileHover={{ scale: 1.2 }} href="/download" target="_blank">
                    <Pdf className="pdf"/>
                </Link>
            </motion.ul>

            <Mode whileHover={{ scale: 1.2 }} title="Change Theme">
                <Moon onClick={setMode}/>
            </Mode>
        </Wrapper>
    )
}

function AnimatedSlideInComponent({ direction = "left", offset = 30, children }) {
  const [ref, inView] = useInView(30);

  const x = { target: "0%" };

  if (direction === "left") x.initial = "-150%";
  else x.initial = "150%";

  return (
    <motion.section
      initial={{ x: x.initial }}
      animate={{ 
        x: inView && x.target,
        transitionEnd:{
          x: inView && 0
        }
      }}
      transition={{ type: "spring", damping: 100 }}
      ref={ref}
    >
      {children}
    </motion.section>
  );
}

Animecard = styled(motion.div)`
	z-index: 99;
	position: absolute;
	bottom: 0;
	height: 50%;
	width: 100vw;
	background: var(--cardbg);
	border-radius: var(--card-radius);
`

AnimMain = ({ children }) => {
  const [isOpen] = useContext(MenuContext)

  const siteBody = {
    open: {
      x: "var(--menuWidth)",
    },
    closed: {
      x: 0,
    },
  }

  return (
    <motion.div
      initial="closed"
      animate={isOpen ? "open" : "closed"}
      variants={siteBody}
      transition={{ type: "ease", stiffness: 50, velocity: 50 }}
      style={{
        transition: "filter 0.3s ease",
        filter: isOpen ? "blur(25px)" : "none",
      }}
    >
      {children}
    </motion.div>
  )
}

export default function BlogPost({ source, frontMatter }) {
    // const { title, date, description, tags, image } = frontMatter

    return (
        <motion.div
            initial={{ y: -20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: .7, delay: .4 }}
        >
            <BlogLayout frontMatter={frontMatter}>
                <MDXRemote {...source} components={MDXComponents} />
            </BlogLayout>
        </motion.div>
    )
}

FadeIn = ({ children }) => {
    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 2 }}
        >
            {children}
        </motion.div>
    )
}

function Loader({ even }) {
  return (
    <motion.div
      className="flex mb-3"
      initial={{ rotate: 10, scale: 0 }}
      animate={{ rotate: 0, scale: 1 }}
    >
      <div className="hidden md:block" style={{ width: '55px' }} />
      <div className={`loader ${even ? 'ml-3 mr-auto' : 'mr-3 ml-auto'}`}>
        <div />
        <div />
        <div />
      </div>
      <div className="hidden md:block" style={{ width: '55px' }} />
    </motion.div>
  )
}

Transition = ({ children, location }) => {
  const duration = 0.35

  const variants = {
    initial: {
      opacity: 0,
      y: 20,
    },
    enter: {
      opacity: 1,
      y: 0,
      transition: {
        duration: duration,
        delay: duration,
        when: "beforeChildren",
      },
    },
    exit: {
      opacity: 0,
      y: -20,
      transition: { duration: duration },
    },
  }

  return (
    <AnimatePresence>
      <motion.div
        key={location.pathname}
        variants={variants}
        initial="initial"
        animate="enter"
        exit="exit"
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}

function AnimatedSlideInComponent({ direction = "left", offset = 30, children }) {
  const [ref, inView] = useInView(30);

  const x = { target: "0%" };

  if (direction === "left") x.initial = "-150%";
  else x.initial = "150%";

  return (
    <motion.section
      initial={{ x: x.initial }}
      animate={{ 
        x: inView && x.target,
        transitionEnd:{
          x: inView && 0
        }
      }}
      transition={{ type: "spring", damping: 25 }}
      ref={ref}
    >
      {children}
    </motion.section>
  );
}

Coins = styled(motion.div)`
  display: flex;
  position: absolute;
  left: 0;
  top: 10px;

  img {
    display: inline-block;
    height: 100px;
    margin-right: 20px;
  }
  width: 700%;
`

Header = styled(motion.header)`
  display: flex;
  border-radius: 4px;
  cursor: pointer;
  padding: 16px;
  font-size: 1.2rem;
  font-weight: 500;
  transition: all 0.25s ease-in-out;
`

export function IntroScreen(props) {
    const {selectedCity} = props;
    const controls = useAnimation();
    const contentControls = useAnimation();
    const close = {height: 0, transition: {ease: "easeInOut", duration: 1}}

    useEffect(()=>{
        contentControls.start({y: 0, opacity: 1, transition: {ease: 'easeInOut'}})
    },[])
    return (
        <motion.div
            className="introScreenContainer"
            animate={controls}
        >
            <motion.div
                className="introScreenContent"
                initial = {{y: 10, opacity: 0}}
                animate={contentControls}
            >
                <h1>Hey! Whats this?</h1>
                <p> Looks like points on a map!
                </p>
                <motion.button
                    className="primary_btn"
                    whileHover={{scale: 1.02}}
                    whileTap={{scale:0.9}}
                    onClick = {()=> {
                        selectedCity ? PageView(selectedCity) : PageView('Homepage')
                        controls.start(close)
                        contentControls.start({opacity: 0, transition: {duration: 0.1}})
                    }}
                >View the map
                </motion.button>
            </motion.div>
        </motion.div>
    )
}

function Card(props) {

    const variants = {
        visible: i => ({
            opacity: 1,
            y: 0,
            transition: {
              delay: i * 0.1,
              duration: 0.5,
              ease: "easeIn",
              type: "spring",
              stiffness: 50
            },
          }),
        hidden: { opacity: 0, y: 200}
    }

    return (
        <a href={props.link} target="_blank" rel="noopener noreferrer">
            <motion.div className = "Card four columns"
                initial="hidden"
                animate="visible"
                custom={props.i}
                variants={variants}>
                <img className = "cover" src = {props.cover} alt=""></img>
                <div className="data">
                    <h2>{props.title}</h2>
                    <p>{props.subtitle}</p>
                </div>
            </motion.div>
        </a>
    )
}

PrivateRoute = ({ component: Component, ...rest }) => {
  const config = {
    type: 'spring',
    damping: 20,
    stiffness: 100,
  };

  return (
    // Show the component only when the admin is logged in
    // Otherwise, redirect the admin to /signin page

    <Route
      {...rest}
      render={(props) =>
        window.localStorage.getItem('isLoggedIn') ? (
          <motion.div
            transition={config}
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -20, opacity: 0 }}
          >
            <Component {...props} />
          </motion.div>
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

PrivateRoute = ({ component: Component, ...rest }) => {
  const config = {
    type: "spring",
    damping: 20,
    stiffness: 100,
  };
  return (
    // Show the component only when the admin is logged in
    // Otherwise, redirect the admin to /signin page

    <Route
      {...rest}
      render={(props) =>
        authService.token.get() ? (
          <motion.div
            transition={config}
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -20, opacity: 0 }}
          >
            <Component {...props} />
          </motion.div>
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

function ExerciseLayout({ playground, challenge, notes }) {
  const exerciseParams = useExerciseParams();
  const currentId = exerciseParams.id;
  const panels = [playground, challenge];

  return (
    <Tabs className="min-h-screen bg-gray-200 grid grid-cols-2 xl:grid-cols-layout grid-rows-layout gap-x-6">
      <Head>
        <title>Exercise {currentId}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar currentId={currentId} />
      <TabPanels className="bg-white h-full shadow-2xl">
        {panels.map((panel, panelIndex) => (
          <TabPanel key={panelIndex} className="outline-none">
            {panel}
          </TabPanel>
        ))}
      </TabPanels>
      <div className="bg-white h-full px-10 py-8 shadow-2xl">
        <motion.section
          key="notes-section"
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="prose"
        >
          {notes}
        </motion.section>
      </div>
    </Tabs>
  );
}

BackToTopSection = () => {
  return (
    <BackToTop
      as={motion.div}
      animate={{ x: 0, y: [20, -20, 20] }}
      transition={{
        type: 'spring',
        damping: 10,
        stiffness: 100,
        duration: 2,
        repeat: Infinity,
      }}
    >
      <BackLink to="#navbar">
        Back to Top
        <Icon src={BackIcon} alt={'back Icon'} w="24" h="24" m={'0 0 0 10px'} />
      </BackLink>
    </BackToTop>
  );
}

export default function Modal(props) {
  const { isVisible, setIsVisible, className, zIndex } = props;
  const modalRef = useRef(null);
  useLockBodyScroll(modalRef, isVisible);
  useEffect(
    () => {
      function close(e) {
        if (e.keyCode === 27) {
          setIsVisible(false);
        }
      }
      window.addEventListener('keydown', close);
      return () => window.removeEventListener('keydown', close);
    },
    [setIsVisible]
  );

  const fadeVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  };

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className={cx('Modal', className)}
          style={{ zIndex }}
          initial="hidden"
          animate="visible"
          exit="hidden"
          variants={fadeVariants}
          transition={{ duration: 0.2 }}
        >
          <div
            className="Modal-backdrop"
            style={{
              overflow: isVisible ? 'hidden' : 'visible',
              position: 'fixed',
            }}
            onClick={() => setIsVisible(false)}
          />
          <div className="Modal-content">
            <div className="Modal-title-bar">
              <div className="Modal-title">{props.label}</div>
              <div className="Modal-close-button" onClick={() => setIsVisible(false)}>
                <MdClose fontSize={20} className="Modal-close-icon" />
              </div>
            </div>
            <div className="divider" />
            <div className="Modal-body" ref={modalRef}>
              {props.children}
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

PrivateRoute = ({ children, isAuthenticated, ...rest }) => {
  const containerVariants = {
    hidden: {
      opacity: 0,
    },
    visible: {
      opacity: 1,

      transition: {
        delay: 0.5,
        duration: 0.5,
      },
    },
    exit: {
      x: "-100vw",
      transition: { ease: "easeInOut" },
    },
  };

  return (
    <Route
      {...rest}
      exact
      render={(props) => {
        return isAuthenticated ? (
          <React.Fragment>{children}</React.Fragment>
        ) : (
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            exit="exit"
          >
            <Redirect
              to={{
                pathname: "/auth",
                state: { from: props.location },
              }}
            />
          </motion.div>
        );
      }}
    />
  );
}

function LatestPatchNote({ patchNote, onClose }) {
    useEffect(() => {
        document.body.style.overflow = 'hidden';

        return () => (document.body.style.overflow = 'auto');
    }, []);

    return (
        <motion.div
            className="latestPatchNote__overlay"
            onClick={onClose}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
        >
            <motion.div
                className="latestPatchNote__modal"
                onClick={(e) => e.stopPropagation()}
                initial={{ opacity: 0, y: -100 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -100 }}
            >
                <Row justify="end">
                    <Col>
                        <h1 className="latestPatchNote__title">
                            Nouveautés du{' '}
                            {moment(patchNote.createdAt).format('DD MMMM YYYY')}
                        </h1>
                        <h4 className="latestPatchNote__subtitle">
                            Version {patchNote.version}
                        </h4>
                    </Col>
                    <Col xs="content">
                        <FontAwesomeIcon
                            className="latestPatchNote__close"
                            icon={faTimes}
                            onClick={onClose}
                        />
                    </Col>
                </Row>

                <div className="latestPatchNote__content">
                    <Markdown>{patchNote.content}</Markdown>
                </div>
            </motion.div>
        </motion.div>
    );
}

Container = styled(motion.div)`
	padding-top: 2em;
	color: white;
	overflow: hidden;
	font-family: 'Asap', sans-serif;
	width: 100%;
`

ModuleItem = ({ module, units, query, progress }) => {
  const isCurrentModule = units.find((u) => u.slug === query.slug);
  const [isOpen, setIsOpen] = useState(isCurrentModule);
  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <div>
      <button
        className="font-bold p-2 cursor-pointer w-full text-left hover:bg-blue-100 rounded-md focus:outline-none focus:ring-2 ring-inset ring-blue-500 flex"
        onClick={toggleOpen}
      >
        <span>{module}</span>
        <span className="w-4 h-4 inline-block ml-auto self-center">
          {isOpen ? <Less /> : <More />}
        </span>
      </button>
      <AnimatePresence>
        {isOpen && units && (
          <motion.div
            initial="collapsed"
            animate="open"
            exit="collapsed"
            variants={{
              open: { opacity: 1, height: "auto", overflow: "hidden" },
              collapsed: { opacity: 0, height: 0 },
            }}
            transition={{ duration: 0.3, ease: [0.5, 0.7, 0.4, 1] }}
          >
            <ul>
              {units.map((unit) => (
                <UnitItem
                  key={unit.slug}
                  unit={unit}
                  query={query}
                  progress={progress}
                />
              ))}
            </ul>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}