Block Transition

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import { TransitionRouter } from "next-transition-router";
6import React, { useLayoutEffect, useRef } from "react";
7import gsap from "gsap";
8import { prefersReducedMotion } from "@/lib/motion";
9 
10 
11const ROWS = 5;
12const COLOR = "#000000";
13 
14const STAGGER_DELAY = 0.12;
15const COVER_DURATION = 0.72;
16const REVEAL_DURATION = 0.68;
17const BLOCK_OFFSET_PERCENT = 101;
18 
19const SHIFT_SCALE_OUT = 0.98;
20const SHIFT_SCALE_IN = 1.02;
21const SHIFT_BLUR = "4px";
22const SHIFT_DURATION_OUT = 0.7;
23const SHIFT_DURATION_IN = 0.8;
24 
25 
26export default function BlockTransition({
27  children,
28  enableContentShift = false,
29  rows = ROWS,
30  color = COLOR,
31}) {
32  const wrapperRef = useRef(null);
33  const rowRefs    = useRef([]);
34 
35  const getRows = () => rowRefs.current.filter(Boolean);
36 
37 
38 
39  const buildRowsAnimation = (timeline, direction) => {
40    const rows = getRows();
41    const orderedRows = direction === "cover" ? rows : [...rows].reverse();
42 
43    orderedRows.forEach((row, index) => {
44      const [leftBlock, rightBlock] = row.children;
45      const delay = index * STAGGER_DELAY;
46 
47      if (direction === "cover") {
48        timeline.set([leftBlock, rightBlock], { autoAlpha: 1 }, delay);
49        timeline.to(
50          [leftBlock, rightBlock],
51          {
52            xPercent: 0,
53            duration: COVER_DURATION,
54            ease: "power3.inOut",
55          },
56          delay
57        );
58      } else {
59        timeline.to(
60          leftBlock,
61          {
62            xPercent: -BLOCK_OFFSET_PERCENT,
63            duration: REVEAL_DURATION,
64            ease: "power3.inOut",
65          },
66          delay
67        );
68        timeline.set(leftBlock, { autoAlpha: 0 }, delay + REVEAL_DURATION);
69 
70        timeline.to(
71          rightBlock,
72          {
73            xPercent: BLOCK_OFFSET_PERCENT,
74            duration: REVEAL_DURATION,
75            ease: "power3.inOut",
76          },
77          delay
78        );
79        timeline.set(rightBlock, { autoAlpha: 0 }, delay + REVEAL_DURATION);
80      }
81    });
82  };
83 
84 
85  useLayoutEffect(() => {
86    getRows().forEach((row) => {
87      const [leftBlock, rightBlock] = row.children;
88      if (!leftBlock || !rightBlock) return;
89 
90      gsap.set(leftBlock, {
91        xPercent: -BLOCK_OFFSET_PERCENT,
92        autoAlpha: 0,
93      });
94 
95      gsap.set(rightBlock, {
96        xPercent: BLOCK_OFFSET_PERCENT,
97        autoAlpha: 0,
98      });
99    });
100  }, []);
101 
102 
103  return (
104    <TransitionRouter
105      auto
106// … truncated