Pin Content

Pin content refers to a feature that allows users to mark or save specific content items in an easily accessible location. This feature is handy for bookmarking important content for later references and highlighting particular pieces of content for increased visibility or importance.

Here's a sample code for pin content:

⚠️

It will work only on Client Site Rendaring (CSR).

Use

import { useRef } from "react";
 
// gsap
import { useGSAP } from "@gsap/react";
import hasPinContent from "@/lib/animation/hasPinContent";
 
const containerRef = useRef<HTMLDivElement>(null!);
const pinElement = useRef<HTMLDivElement>(null!);
const pinArea = useRef<HTMLDivElement>(null!);
 
useGSAP(
  () => {
    hasPinContent(pinElement.current, pinArea.current, "top 100px", 1024);
  },
  { scope: containerRef }
);
 
<div ref={containerRef}>
  <div ref={pinArea}>
    <div ref={pinElement}>...content</div>
  </div>
</div>

width is optional.

Image Reveal Animation Text Move Animation