Merge pull request #49 from basementstudio/visualizer

[visualizer]

.changeset/smooth-plants-help.md

@@ -0,0 +1,6 @@
+---
+"website": patch
+"@bsmnt/scrollytelling": minor
+---
+
+Visualizer.

scrollytelling/index.d.ts

@@ -0,0 +1 @@
+declare module "*.scss";

scrollytelling/package.json

@@ -9,7 +9,7 @@
   "sideEffects": false,
   "scripts": {
     "dev": "yarn build --watch",
-    "build": "tsup ./src/index.ts --format esm,cjs --dts"
+    "build": "tsup --config tsup.config.ts"
   },
   "peerDependencies": {
     "gsap": ">=3",
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "esbuild-scss-modules-plugin": "^1.1.1",
     "gsap": "^3.11.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

scrollytelling/src/components/debugger/index.tsx

@@ -1,48 +1,28 @@
-import * as React from "react";
-import { useScrollytelling } from "../../context";
+import { useEffect, useState } from "react";
+import { Visualizer } from "./visualizer";
+import { Portal } from "@radix-ui/react-portal";
 
 // ---- Debugger
 
-export const Debugger = () => {
-  const { timeline, rootRef } = useScrollytelling();
-  const [progress, setProgress] = React.useState<{
-    percentage: string;
-    px: string;
-  }>();
+export default function Debugger() {
+  const [mountInstance, setMountInstance] = useState(false);
 
-  React.useEffect(() => {
-    if (!timeline || !rootRef.current) return;
-    const handleUpdate = () => {
-      const progress = timeline.progress();
-      if (!timeline.scrollTrigger) return;
-
-      const start = timeline.scrollTrigger.start;
-      const end = timeline.scrollTrigger.end;
-      const scroll = (end - start) * progress;
-      setProgress({
-        percentage: `${(progress * 100).toFixed(2)}%`,
-        px: `${scroll.toFixed(0)}px`,
-      });
+  useEffect(() => {
+    const w = window as {
+      __scrollytelling_alreadyMountedDebuggerInstance?: boolean;
     };
 
-    timeline.eventCallback("onUpdate", handleUpdate);
-
-    return () => {
-      timeline.eventCallback("onUpdate", null);
-    };
-  }, [timeline, rootRef]);
+    const alreadyMountedInstance =
+      w.__scrollytelling_alreadyMountedDebuggerInstance;
+    if (alreadyMountedInstance) return;
+    setMountInstance(true);
+    w.__scrollytelling_alreadyMountedDebuggerInstance = true;
+  }, []);
 
+  if (!mountInstance) return <></>;
   return (
-    <div
-      style={{
-        width: "370px",
-        padding: "24px",
-        border: "1px solid black",
-        fontSize: "12px",
-        background: "#360202",
-      }}
-    >
-      <pre>{JSON.stringify({ progress }, null, 2)}</pre>
-    </div>
+    <Portal>
+      <Visualizer />
+    </Portal>
   );
-};
+}

scrollytelling/src/components/debugger/visualizer/helpers.tsx

@@ -0,0 +1,35 @@
+import s from "./visualizer.module.scss";
+
+export const highlight = (target: SVGElement | HTMLElement) => {
+  // Create a div element that has the same dimensions and position as the target
+  const highlight = document.createElement("div");
+
+  highlight.style.position = "fixed";
+  const bounds = target.getBoundingClientRect();
+  highlight.style.top = `${bounds.top}px`;
+  highlight.style.left = `${bounds.left}px`;
+  highlight.style.width = `${bounds.width}px`;
+  highlight.style.height = `${bounds.height}px`;
+
+  highlight.classList.add(s["highlight"] as string);
+
+  // Append to body.
+  document.body.appendChild(highlight);
+
+  // Clear instance
+  return () => {
+    document.body.removeChild(highlight);
+  };
+};
+
+export const colors = [
+  ["#F87171", "#991B1B"],
+  ["#FACC15", "#854D0E"],
+  ["#4ADE80", "#166534"],
+  ["#2DD4BF", "#115E59"],
+  ["#38BDF8", "#075985"],
+  ["#818CF8", "#3730A3"],
+  ["#C084FC", "#6B21A8"],
+  ["#E879F9", "#86198F"],
+  ["rgba(244, 114, 182, 0.40)", "#9D174D"],
+];