I am using react-bubble-ui this package.
import BubbleUI from "react-bubble-ui";
import "react-bubble-ui/dist/index.css";
import Child from "./ChildComponent";
import "./bees_bubble.css";
export default function Bubbles({ bees }) {
const options = {
size: 65,
minSize: 20,
gutter: 10,
provideProps: true,
numCols: 25,
fringeWidth: 10,
fringeHeight: 10,
yRadius: 100,
xRadius: 100,
cornerRadius: 50,
showGuides: false,
compact: true,
gravitation: 5,
};
const children = bees?.map((data: any, i: number) => {
return <Child data={data} key={i} />;
});
return (
<BubbleUI options={options} className="h-[300px] rounded-50">
{children}
</BubbleUI>
);
}
I achieved the desired look. But the problem is that I can’t move horizontally. Mouse wheel only scrolls to vertical direction. I want to scroll it to where the mouse pointer is. I could not isolate the affect only to this component.
import { useState, useEffect, useRef } from "react";
import BubbleUI from "react-bubble-ui";
import "react-bubble-ui/dist/index.css";
import Child from "./ChildComponent";
import "./bees_bubble.css";
export default function Bubbles({ bees }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const bubbleContainerRef = useRef<HTMLDivElement>(null);
const options = {
size: 65,
minSize: 20,
gutter: 10,
provideProps: true,
numCols: 25,
fringeWidth: 10,
fringeHeight: 10,
yRadius: 100,
xRadius: 100,
cornerRadius: 50,
showGuides: false,
compact: true,
gravitation: 5,
};
const handleMouseMove = (e: MouseEvent) => {
if (!bubbleContainerRef.current) return;
// Get the dimensions of the bubble container
const containerRect = bubbleContainerRef.current.getBoundingClientRect();
const containerCenterX = containerRect.left + containerRect.width / 2;
const containerCenterY = containerRect.top + containerRect.height / 2;
// Calculate the distance from the mouse pointer to the center of the bubble container
const offsetX = (e.clientX - containerCenterX) * 0.1; // Scale movement for smoother transition
const offsetY = (e.clientY - containerCenterY) * 0.1; // Scale movement for smoother transition
// Update the position state to move the bubbles
setPosition((prevPosition) => ({
x: prevPosition.x + offsetX,
y: prevPosition.y + offsetY,
}));
};
useEffect(() => {
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
const children = bees?.map((data: any, i: number) => (
<Child data={data} key={i} />
));
return (
<div
ref={bubbleContainerRef}
className="myBubbleUI h-[300px] rounded-50"
style={{
transform: `translate(${position.x}px, ${position.y}px)`,
transition: "transform 0.1s ease-out", // Smooth out the movement
}}
>
<BubbleUI options={options} className="h-full w-full">
{children}
</BubbleUI>
</div>
);
}
I kinda worked out to this but the problem is that it moves the entire div not the bubbles :’)
Is there any way that I can make nested div to scroll to mouse pointer direction?
