Animating a honeycomb image by changing the opacity and fill color.

[Haz07 2 Likes (Newbie)]

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.

[Haz07 2 Likes (Newbie)]

https://drive.google.com/file/d/1jFzmSVQYo2J5v7RPOV4xyTse0xBswEb3/view?usp=sharing

 

This is the url for the image I am using. 

[GreenSock 16,633 Likes (Superhero)]

Hi @Haz07. Did you have a GSAP-related question we could help with? 

 

Also, I'm not sure why you're setting the "fill-opacity" attribute in some cases, and the CSS fillOpacity in others. I would definitely recommend being consistent and only affecting one. 

[Haz07 2 Likes (Newbie)]

Thanks @GreenSock,

I disabled svgo and was able to retain the polygons in my image. I was able to get it animated using the same code.