import { observer } from 'mobx-react-lite';
import { useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import Titanium from './components/Titanium_Honeycomb.js';
const HoneycombCard = (() => {
const innerRef = useRef();
const animate = () => {
var rows = [];
for (var i = 0; i < 15; i++) {
// We're doing 15 columns
var idx = 1 + Math.floor(Math.random() * 24);
if (rows.includes(idx)) {
continue;
}
rows.push(idx);
var tl = animate_line(idx);
tl.repeatDelay(Math.random());
tl.repeat(-1);
}
};
function animate_line(start) {
const q = gsap.utils.selector(innerRef.current);
var tl = gsap.timeline();
tl.to(
q('#prefix__comb' + start.toString().padStart(3, 0)),
{ fillOpacity: 0.0, duration: 0.0 },
0
);
for (let i = start; i <= 456; i += 24) {
var id = '#prefix__comb' + i.toString().padStart(3, 0);
gsap.set(q(id), { attr: { fill: '#f802b', 'fill-opacity': 0.0 } });
tl.to(
q(id),
{
fillOpacity: 0.5,
duration: 0.1,
},
'<'
);
tl.to(
q(id),
{
fillOpacity: 0.0,
duration: 1.0,
},
'>'
);
}
return tl;
}
useEffect(() => {
if (
innerRef &&
innerRef.current
) {
animate();
}
});
return (
<Titanium ref={innerRef} className='selected-card' />
);
});
export default HoneycombCard;
I am trying to animate a honeycomb image. I was able to access the path, but was not able to get the animation working. This is my code for the animation. prefix__combxxx is the honeycomb ids.
