Create Zoom Transition Animations in React and Framer Motion: A How-To Guideโ€‚by@parmeetsasija

Create Zoom Transition Animations in React and Framer Motion: A How-To Guide

This article aims to explain, how we could create a zoom page transition animation effect for a gallery web application using React & Framer Motion. A masonry layout grid is created and then framer motion is used to develop page transition.
image
Parmeet Singh Asija HackerNoon profile picture

Parmeet Singh Asija

Freelance Frontend Developer with 3+ years experience in React, Javascript and Typescript | Software Engineer

facebook social icongithub social iconinstagram social iconlinkedin social icontwitter social icon
Interruption in the user's experience while navigating between pages can often lead to them going off the website. We could improve on that by adding page transitions in our web application which could lead to an uninterrupted experience for the user.
This article aims to explain, how we could create one such page transition animation for a gallery web app using React & Framer Motion. So let's get started with it then! ๐Ÿ˜‰

Project Initialisation

npx create-react-app gallery

Install Dependencies

yarn add framer-motion styled-components polished react-use

Images Data Structure

All the images are stored in an array of the following data structure:
{
   "name": string,
   "location": string,
   "variant": string,
   "creator": {
     "name": string,
     "avatar": url_string
   }
}

App Component

ImageGrid component is called inside App component.
// path:src/App.js

import { useState } from "react";

// External
import styled from "styled-components";
import { motion } from "framer-motion";

// Components
import ImageGrid from "./components/image-grid";

// Styles
import { Container, Heading } from "./styles/globalStyles";

const AppStyles = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8ebe2;
`;

const App = () => {
  // index of the image being shown
  const [selectedImage, setSelectedImage] = useState(-1);

  return (
    <AppStyles>
      <Container>
        <Heading>Explore ๐Ÿ‡ฎ๐Ÿ‡ณ</Heading>
        <ImageGrid
          selectedImage={selectedImage}
          setSelectedImage={setSelectedImage}
        />
      </Container>
    </AppStyles>
  );
};

export default App;

Image Grid Component

This page shows all the images in a masonry grid layout.
// path:src/components/image-grid/index.js

import { useState, useEffect } from "react";

// External
import { AnimateSharedLayout } from "framer-motion";
import { useLockBodyScroll } from "react-use";

// Components
import SinglePicture from "./single-picture";

// Styles
import { Grid } from "./styles";

// Data
import data from "../../data.json";

const ImageGrid = ({ selectedImage, setSelectedImage }) => {
  // helps in preventing body from scrolling when an image page is being shown
  const [isScrollLocked, setScrollLocked] = useState(false);

  useLockBodyScroll(isScrollLocked);

  useEffect(() => {
    if (selectedImage !== -1) {
      setScrollLocked(true);
    } else {
      setScrollLocked(false);
    }
  }, [selectedImage]);

  return (
    <AnimateSharedLayout>
      <Grid>
        {data.images.map((data, index) => (
          <SinglePicture
            key={`${data.name}-${index}`}
            isSelected={selectedImage === index}
            index={index}
            setSelectedImage={setSelectedImage}
            data={data}
          />
        ))}
      </Grid>
    </AnimateSharedLayout>
  );
};

export default ImageGrid;

Single Picture

This page shows a single image with some image metadata.
// path: src/components/image-grid/single-picture.jsx

// Styles
import { Flex } from "../../styles/globalStyles";
import {
  Image,
  SinglePictureContainer,
  Back,
  InfoCard,
  Name,
  PhotographerName,
  Avatar,
  Location,
} from "./styles";

// Assets
import images from "../../images";
import { CloseIcon } from "../../images/CustomIcons";

// animation config and variants
const spring = {
  type: "spring",
  stiffness: 500,
  damping: 30,
};

const backVariants = {
  initial: {
    opacity: 0,
    y: -20,
  },
  animate: { opacity: 1, y: 0 },
};

const cardVariants = {
  initial: {
    opacity: 0,
    y: 100,
    x: "-50%",
  },
  animate: { opacity: 1, y: 0, x: "-50%" },
};

const SinglePicture = ({
  isSelected,
  setSelectedImage,
  index,
  data: { creator, location, name, variant },
}) => {
  const goBack = () => {
    setSelectedImage(-1);
  };

  return (
    <SinglePictureContainer
      isSelected={isSelected}
      layoutId={`card-container--index-${index}`}
      transition={spring}
      variant={variant}
    >
      {isSelected && (
        <Back
          onClick={goBack}
          initial="initial"
          animate="animate"
          exit="initial"
          transition={{ delay: 0.2, duration: 0.5 }}
          variants={backVariants}
        >
          <CloseIcon />
        </Back>
      )}
      <Image
        src={images[name]}
        alt={name}
        onClick={() => {
          setSelectedImage(index);
        }}
        isExpanded={isSelected}
        layoutId={`card-image--index-${index}`}
      />
      {isSelected && (
        <InfoCard
          initial="initial"
          animate="animate"
          exit="initial"
          transition={{ delay: 0.1, duration: 0.5 }}
          variants={cardVariants}
        >
          <Location>{location}</Location>
          <Name>{name}</Name>
          <Flex>
            <Avatar
              image={
                !!creator.avatar
                  ? `${creator.avatar}?q=10&w=50`
                  : images.avatarFallback
              }
            />
            <PhotographerName>{creator.name}</PhotographerName>
          </Flex>
        </InfoCard>
      )}
    </SinglePictureContainer>
  );
};

export default SinglePicture;

Conclusion

And there we have it, the gallery page transition animation is ready. The Code is available on Github. Would love to hear your valuable feedback in the comments down below.
See you guys ๐Ÿ‘‹๐Ÿปย  in the next article of this Component series!

Happy coding & Stay safe! โœจ

Follow me on Twitter & Instagram for more!

This article can also be read on my website.
react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!