Fade-in animations can significantly enhance the user experience by introducing elements gracefully into the UI. In React development, creating reusable components can streamline the process and maintain code consistency across a project. In this article, we'll explore a concise method using React, Framer Motion, and Intersection Observer to achieve a reusable fade-in animation component.

Code Breakdown

The FadeIn component is designed to animate its children by fading them in as they become visible in the viewport. Here's a breakdown of the key components and their roles:

Dependencies: The component imports necessary dependencies such as motion and useAnimation from Framer Motion, as well as useInView from react-intersection-observer.

Props: The FadeIn component accepts three props:

• children: Represents the content or elements to be faded in.

• className: Allows for additional styling.

• checkInView: A boolean flag to determine if the animation should occur when the element is in view. Logic:

useAnimation: Initializes animation controls provided by Framer Motion.

useInView: Provides a reference and a boolean flag (inView) to detect if the component is in the viewport.

useEffect: Triggers the animation when the component enters the viewport (inView) or based on the checkInView prop.

Motion Component: Utilizes motion.div from Framer Motion to wrap the children. Animates the element's opacity and y-axis position (from a hidden state off the screen to visible).

Implementation

Developers can easily implement the FadeIn component by following these steps:

1. Import the Component: Import the FadeIn component into your React project where you wish to apply fade-in animations.

2. Usage: Use the FadeIn component and pass the elements you want to animate as its children.

import FadeIn from './FadeInComponentPath';

const MyComponent = () => {
  return (
    <div>
      <FadeIn>
        {/* Elements to be faded in */}
        <h1>Your Content Here</h1>
        <p>Additional elements</p>
      </FadeIn>
    </div>
  );
};

1. Customization: Customize the animation by adjusting the transition duration, variants, or additional styling via the className prop.

Conclusion

Implementing reusable components like the FadeIn component not only simplifies the integration of animations but also promotes maintainability and consistency within a React application. This approach empowers React UI developers to create engaging user experiences with minimal code repetition.

By leveraging the power of React, Framer Motion, and Intersection Observer, developers can effortlessly incorporate subtle yet impactful animations into their projects, enhancing the overall aesthetics and usability of their applications.

Feel free to integrate this FadeIn component into your React projects and explore its adaptability to different UI elements, bringing life to your user interfaces through elegant fade-in animations.

Codebase

import { motion, useAnimation } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { FC, useEffect } from "react"

interface FadeInProps {
  children: any
  className?: string
  checkInview?: boolean
}

const FadeIn: FC<FadeInProps> = ({ children, className = "", checkInview = true }) => {
  const controls = useAnimation()
  const [ref, inView] = useInView()

  useEffect(() => {
    if (inView || !checkInview) {
      controls.start("visible")
      return
    }

    controls.start("hidden")
  }, [controls, inView, checkInview])

  return (
    <motion.div
      ref={ref}
      animate={controls}
      initial="hidden"
      transition={{ duration: 0.5 }}
      variants={{
        visible: { opacity: 1, y: 0 },
        hidden: { opacity: 0, y: 100 },
      }}
      className={`w-full ${className}`}
    >
      {children}
    </motion.div>
  )
}

export default FadeIn

• Button CSS

/* Pulse Effect */
.pulse__effect {
  animation: pulse-effect 1s ease-out;
}

@keyframes pulse-effect {
  0% {
    opacity: 0.2;
    height: 0px;
    width: 0px;
  }
  100% {
    opacity: 0;
    height: 400px;
    width: 400px;
  }
}

• Usage

import { FC, LegacyRef, ReactNode, useRef } from "react"
import usePulseEffect from "./usePulseEffect"

interface ButtonProps {
  id: string
  refP?: Element
  children?: ReactNode
  className?: string
  type?: "button" | "submit" | "reset" | undefined
  pulseColor?: string
  onClick?: (e: any) => void
  disabled?: boolean
}

const Button: FC<ButtonProps> = ({
  id,
  refP,
  children,
  pulseColor,
  className,
  onClick,
  ...rest
}) => {
  const elementRef = useRef()
  const ref = useRef()
  const pulseRef = useRef()

  usePulseEffect({
    ref,
    pulseRef,
    pulseColor,
  })

  return (
    <button
      ref={ref}
      id={id}
      type="button"
      className={`transition duration-[300ms] 
          rounded-[30px] text-[white]
          relative
          overflow-hidden
          ${className || ""}`}
      onClick={onClick}
      {...rest}
    >
      <div
        className={`absolute
        z-[0] left-[-5px] top-[-5px]
        rounded-[50%]
        translate-x-[-50%]
        translate-y-[-50%]
        w-[0px] h-[0px]`}
        ref={pulseRef}
      />
      <div
        ref={(refP as unknown as LegacyRef<HTMLDivElement>) || elementRef}
        className="
      z-[3] w-full
      flex items-center justify-center
      gap-[10px]"
      >
        {children}
      </div>
    </button>
  )
}

export default Button

I shared this codebase to support core UI development of frontend engineers.I will continue to post in the next entry.

import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui"
import { FC } from "react"

export const ERC6551_REGISTRY_ADDRESS = "0x02101dfB77FDE026414827Fdc604ddAF224F0921"
export const ERC6551_IMPLEMENTATION_ADDRESS = "0x2d25602551487c3f3354dd80d76d54383a243358"
export const ERC6551_INIT_DATA = "0x8129fc1c"

interface CrossmintButtonProps {
  wallet: string
  quantity: number
}

const CrossmintButton: FC<CrossmintButtonProps> = ({ wallet, quantity }) => {
  const { referral } = useInvest()
  const referralProjectId = "425871f8........125f28bcd"
  const referralCollectionId = "6a032ac..........cc260"
  const mintConfig = {
    type: "erc-721",
    totalPrice: "0.000001", // 0.000001 eth
    quantity,
    _target: process.env.NEXT_PUBLIC_DROP_CONTRACT,
    _quantity: quantity,
    _to: wallet,
    to: wallet,
    _registry: ERC6551_REGISTRY_ADDRESS,
    _implementation: ERC6551_IMPLEMENTATION_ADDRESS,
    _initData: ERC6551_INIT_DATA,
    referralId: referral,
  }

  return (
    <CrossmintPayButton
      projectId={referral ? referralProjectId : process.env.NEXT_PUBLIC_CROSSMINT_PROJECT_ID}
      collectionId={
        referral ? referralCollectionId : process.env.NEXT_PUBLIC_CROSSMINT_COLLECTION_ID
      }
      environment="staging"
      mintConfig={mintConfig}
      mintTo={wallet}
    />
  )
}

export default CrossmintButton

If we use crossmint, we can create, sell and store NFTs in minutes with APIs, fiat on-ramp & user-friendly wallets - no cryptocurrency required.

Payments

NFT checkout

Accept any payment method for your NFT sales: Debit & credit cards, Apple Pay, cross-chain payments, and more.

https://www.crossmint.com/products/payments

Minting APIs

Create and distribute NFTs

Mint, edit, and burn NFTs. Airdrop them into emails or wallets with a single API call. No crypto required.

https://www.crossmint.com/products/minting-api