framer-motion#AnimateSharedLayout JavaScript Examples

The following examples show how to use framer-motion#AnimateSharedLayout. 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: experience.jsx    From portfolio-v1 with MIT License 6 votes vote down vote up 
Experience = ({ expRef }) => {
	const [selected, setSelected] = useState(0);

	const handleClick = (index) => setSelected(index);

	return (
		<Container ref={expRef}>
			<Title>
				<TitleText>Experience</TitleText>
				<Line />
			</Title>
			<ListContainer>
				<List>
					<AnimateSharedLayout>
						<BodyList>
							{Object.keys(dataExperience.list).map((item, index) => {
								return (
									<ItemExperienceList
										key={index}
										item={item}
										index={index}
										handleClick={handleClick}
										selected={selected}
									/>
								);
							})}
						</BodyList>
					</AnimateSharedLayout>
				</List>
				<ItemExperienceInfo selected={selected} />
			</ListContainer>
		</Container>
	);
}
Example #2
Source File: index.js    From devrel-kpis with MIT License 6 votes vote down vote up 
IndexPage = () => {
  // Use a shared key to that animation understands its the same component
  const sharedKey = "__index__";

  return (
    <Page title="">
      <AnimateSharedLayout type="crossfade" transition={{ type: "spring", damping: 9, mass: 0.3, velocity: 20 }}>
        <Router>
          <PageContent key={sharedKey} path="/" />
          <PageContent key={sharedKey} path="/t/:tipId" />
          <PageContent key={sharedKey} path="/:tagId" />
          <PageContent key={sharedKey} path="/:tagId/:tipId" />
        </Router>
      </AnimateSharedLayout>
    </Page>
  );
}
Example #3
Source File: index.js    From inboxzero-web with MIT License 6 votes vote down vote up 
IndexPage = () => {
  // Use a shared key to that animation understands its the same component
  const sharedKey = "__index__";

  return (
    <Page title="">
      <AnimateSharedLayout type="crossfade" transition={{ type: "spring", damping: 9, mass: 0.3, velocity: 20 }}>
        <Router>
          <PageContent key={sharedKey} path="/" />
          <PageContent key={sharedKey} path="/t/:tipId" />
          <PageContent key={sharedKey} path="/:tagId" />
          <PageContent key={sharedKey} path="/:tagId/:tipId" />
        </Router>
      </AnimateSharedLayout>
    </Page>
  );
}
Example #4
Source File: projects.jsx    From portfolio-v1 with MIT License 5 votes vote down vote up 
Projects = ({ projectRef }) => {
	const [showAdvanced, setShowAdvanced] = useState(true);
	const isMobile = useIsMobile();

	const handleProjects = (e) => {
		const { id } = e.target;
		if (id === 'security') return setShowAdvanced(true);
		if (id === 'projects') return setShowAdvanced(false);
		return;
	};

	return (
		<Container ref={projectRef}>
			<Title>
				<TitleText>My Projects</TitleText>
				<Line />
			</Title>
			<ButtonBox>
				<AnimateSharedLayout>
					<ButtonContainer>
						<Button
							whileHover={{ scaleX: [1, 1.2, 0.85, 1], scaleY: [1, 0.8, 1.15, 1] }}
							transition={{}}
							onClick={handleProjects}
							id='security'>
							{showAdvanced && <BackgroundButton layoutId='underline' />}
							Cyber-Security
						</Button>
						<Button
							whileHover={{ scaleX: [1, 1.2, 0.85, 1], scaleY: [1, 0.8, 1.15, 1] }}
							transition={{}}
							onClick={handleProjects}
							id='projects'>
							{!showAdvanced && <BackgroundButton layoutId='underline' />}
							Projects
						</Button>
					</ButtonContainer>
				</AnimateSharedLayout>
			</ButtonBox>
			<Body>{showAdvanced ? <AdvancedProjects isMobile={isMobile} /> : <BeginnerProjects />}</Body>
		</Container>
	);
}
Example #5
Source File: News.js    From sided.news.web with MIT License 5 votes vote down vote up 
News = React.memo(({ title, date, image, link }) => {
  const [stateOpen, setOpen] = useState(false);

  function handleToggle() {
    setOpen(!stateOpen);
  }

  return (
    <AnimateSharedLayout type="crossfade">
      <motion.div
        layoutId="data"
        whileHover={{ scale: 1.1, opacity: 0.9 }}
        className={styles.news}
      >
        <div
          style={{
            color: "black",
            borderColor: `transparent ${randomcolor()} transparent transparent`,
          }}
          className={styles.news_corner}
        >
          <span>hiru</span>
        </div>
        <div className={styles.left_col}>
          <img src={image} />
        </div>
        <div className={styles.right_col}>
          <div className={styles.news_title}>
            <span className={styles.title_wrapper}>{title}</span>
          </div>

          <div>
            <div className={styles.buttons}>
              <div>
                <Button colorScheme="teal" size="xs" onClick={handleToggle}>
                  Read More
                </Button>
              </div>
              <div>
                <Link href={link}>
                  <Button colorScheme="teal" size="xs" variant="outline">
                    Source
                  </Button>
                </Link>
              </div>
            </div>
            <div className={styles.date}>{date}</div>
          </div>
        </div>
      </motion.div>
      {stateOpen && (
        <motion.div
          onClick={handleToggle}
          layoutId="data"
          className={styles.modal_window}
        >
          <span className={styles.body_text}>
            But a community is only as robust as the dedication of its members.
            Whether people will actually want to use a site that does away with
            so many of the familiar features of major social media networks
            remains to be seen.
          </span>
        </motion.div>
      )}
    </AnimateSharedLayout>
  );
})
Example #6
Source File: NewsModal.js    From sided.news.web with MIT License 4 votes vote down vote up 
export default function NewsModal({
  title,
  date,
  image,
  link,
  provider,
  content,
}) {
  const [stateOpen, setOpen] = useState(false);
  const [description, setDescription] = useState("");
  useEffect(() => {}, []);

  const getDescription = async () => {
    await axios(`/${provider}/get_description`, {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      data: { link: link },
    })
      .then((response) => {
        setDescription(response.data);
      })
      .catch((error) => {
        throw error;
      });
  };

  function handleToggle() {
    setOpen(!stateOpen);
    if (!stateOpen) {
      getDescription();
    }
  }

  return (
    <AnimateSharedLayout type="crossfade">
      {stateOpen ? (
        <div className="modal-overlay" onClick={handleToggle}>
          <motion.div
            layoutId="data"
            className="modal"
            style={{ borderRadius: "20px" }}
          >
            <motion.div
              className={styles.modal_content}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{
                delay: 0.2,
              }}
            >
              <div className={styles.heading}>
                <span>{title}</span>
              </div>
              <div>
                <img className={styles.modal_image} src={image}></img>
              </div>
              {description.data || content !== "" ? (
                <div className={styles.news_body}>
                  {content !== ""
                    ? content
                    : description.data
                    ? description.data
                    : null}
                  {/*  */}
                </div>
              ) : (
                <div className={styles.news_body_loading}>
                  <CircularProgress />
                </div>
              )}
            </motion.div>
            <Link href={link}>
              <Button colorScheme="teal" size="xs" variant="outline">
                Source
              </Button>
            </Link>
          </motion.div>
        </div>
      ) : (
        <motion.div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
          layoutId="data"
          onClick={handleToggle}
        >
          <News
            key={link}
            title={title}
            date={date}
            image={image}
            link={link}
          />
        </motion.div>
      )}
    </AnimateSharedLayout>
  );
}