Haz07 Posted October 1, 2021 Share Posted October 1, 2021 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. Link to comment Share on other sites More sharing options...
Haz07 Posted October 1, 2021 Author Share Posted October 1, 2021 https://drive.google.com/file/d/1jFzmSVQYo2J5v7RPOV4xyTse0xBswEb3/view?usp=sharing This is the url for the image I am using. Link to comment Share on other sites More sharing options...
GreenSock Posted October 1, 2021 Share Posted October 1, 2021 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. Link to comment Share on other sites More sharing options...
Haz07 Posted October 3, 2021 Author Share Posted October 3, 2021 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now