Docs
In View

In View

Reveal content on scroll

Scroll down

Crafting Digital Experiences

Web development is a symphony of creativity and logic, crafting digital experiences that resonate with users. It's about turning visions into reality, blending design aesthetics with functional prowess. From the elegance of front-end interfaces to the robustness of back-end systems, web development is a testament to human ingenuity, connecting people across the globe through seamless interactions.

Installation

Copy and paste the following code into your project.

components/edil-ozi/in-view.tsx
"use client";
import { type ReactNode, useRef, FC } from "react";
import { motion, useInView, Variant, Transition, UseInViewOptions } from "framer-motion";
 
interface Props {
  children: ReactNode;
  variants?: {
    hidden: Variant;
    visible: Variant;
  };
  transition?: Transition;
  viewOptions?: UseInViewOptions;
}
 
const defaultVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};
 
const InView: FC<Props> = ({ children, variants = defaultVariants, transition, viewOptions }) => {
  const ref = useRef(null);
  const isInView = useInView(ref, viewOptions);
 
  return (
    <motion.div
      ref={ref}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={variants}
      transition={transition}
    >
      {children}
    </motion.div>
  );
};
 
export default InView;

Examples

Slide example

Scroll down

Design - is the art of communication. It speaks volumes through visuals, layouts, and typography, creating a symphony of messages that captivate and engage audiences. Among the myriad elements that contribute to the beauty of design, none is perhaps as impactful as the thoughtful combination of text and headings. This article delves into the nuances of selecting and implementing fonts for headings, offering insights into how to elevate your design projects through typography.

Props

Prop nameTypeDefaultDescription
childrenReactNode-Children component
variants{ hidden: Variant; visible: Variant; }{ hidden: { opacity: 0 }, visible: { opacity: 1 } }Animation variants
transitionTransition-Animation Transition
viewOptionsUseInViewOptions-In view behavior