Haz07
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Haz07
-
-
On 9/30/2021 at 11:32 AM, OSUblake said:
Welcome to forums @Haz07
You can't animate SVG elements inside an image, and I really wouldn't use an object tag either as it makes targeting more complicated. You should let your tooling do the importing for you. If you're using Create React App, you can just import an SVG as a component.
import { MyLogo } from './logo.svg'; const App = () => { return ( <div> <MyLogo /> </div> ); }
Which uses SVGR under the hood.
Thanks @OSUblake,
I was not able to directly import svg image as component as I was getting an error since my images were greater than 500kb. So I used react svgr playground and converted all my images into components and I was able to use these components instead. -
https://drive.google.com/file/d/1jFzmSVQYo2J5v7RPOV4xyTse0xBswEb3/view?usp=sharing
This is the url for the image I am using.
-
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.
-
I am trying to animate svg images in React. I am using object tags since I was not able to get Ids from the image using img tag, but this is affecting the caching of the images and is taking time to load. Is there any way I can use image tag and get it to animate or Is there any other way to get it working?
Animating a honeycomb image by changing the opacity and fill color.
in GSAP
Posted
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.