isaoBushi

Hi again, like in the example when I have many variables I'd like to create an array containing them and pass it to the timeline, instead of listing all the variables inside the tl function, but it triggers the error like in the example. Is it due to something in particular? Some clarification would be appreciated, cheers!

That did it, thanks heaps! For future reference, any idea on how can i run the Plugin in codesandbox or codepen ?

Hi there, I'm trying to run this little animation with Gatbsy, while all the other animations work fine morphing is not working no problems in vanilla, it crashes with React, I have add a codesandbox, but seems I can't retrieve the Plugins from there codesandbox

Thank you Jack, that makes sense

Hi there, I've started experimenting with this plugin but at the moment I can't get it run properly <svg> <rect id="end-shape" width="100" height="100" fill="red"/> <path id="start-shape" d="M739.24,486.44a3,3,0,0,0-3.27,2.95.57.57,0,0,0,.57.57.56.56,0,0,0,.56-.57,1.85,1.85,0,0,1,2-1.83,1.92,1.92,0,0,1,1.66,1.94V502a.69.69,0,0,1-.12.38,7.19,7.19,0,0,0-14-1.23,3,3,0,0,0-4.28,0,7.19,7.19,0,0,0-14,1.23.69.69,0,0,1-.12-.38V489.5a1.92,1.92,0,0,1,1.66-1.94,1.85,1.85,0,0,1,2,1.83.56.56,0,0,0,.56.57.57.57,0,0,0,.57-.57,3,3,0,0,0-3.27-2.95,3.05,3.05,0,0,0-2.68,3.06V502a1.79,1.79,0,0,0,1.22,1.69,7.19,7.19,0,0,0,14.36-.48,1.84,1.84,0,0,1,3.68,0,7.19,7.19,0,0,0,14.36.48,1.79,1.79,0,0,0,1.22-1.69V489.5A3.05,3.05,0,0,0,739.24,486.44Zm-23.77,22.85a6.06,6.06,0,1,1,6.06-6.05A6.05,6.05,0,0,1,715.47,509.29Zm18.06,0a6.06,6.06,0,1,1,6.05-6.05A6.06,6.06,0,0,1,733.53,509.29Z" transform="translate(-676.01 -481.98)"/> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="./MorphSVGPlugin.min.js"></script> const tl = gsap.timeline({ yoyo: true, repeat: 1 }) const rect = MorphSVGPlugin.convertToPath("#end-shape") tl.to(rect, 12, { morphSVG:"#start-shape" }) I'm expecting the rectangle to morph into the glasses , while what I see is the rectangle sliding away shrinking what am I doing wrong ? Cheers

I guess, I should have been clearer with what I wanted to achieve. Basically I want to have some sort of animation once I land on the page, items to be animated require data coming from an api call, so I was not sure how to trigger the animation, since it should start as soon as the the page has finished the rendering. Now thanks to your suggestrions, especially the last one I've discovered the onLoad attribute and with that I'm able to trigger the animation once the images are loaded, and works as desired. Sorry for the confusion ?

Thank you again for your answer, I hope you had a great weekend. I have made a Sample, I left the animation function outside the useEffect, and called it after the data has been set to the state, but evidently I am missing something. I hope now it'll be easier to understand what I'm doing and where I'm not doing the right right thing. cheers Andrea p.s. just realized I've used material-ui, assumed that was not a problem ?

Considering your sandbox example, is there a way to have those animating elements showing when the page is loaded instead of a click trigger. The problem that I am facing mainly is due to the fact that useEffect runs before gsap can get a reference and I will be yelled that gsap can't read a null obj. useEffect(() => { const callApi = async () => { let data = { category: "MEMORY", numberOfRecords: 10, }; const responseData = await API.getData(data); //if the data is available it will go in the state and animation will be triggered. if (responseData) { setData(responseData.response.data.data.data); const tl = gsap.timeline({ paused: true }); tl.to(usersDomNodes, { duration: 0.3, stagger: 0.05, y: 0, autoAlpha: 1, }).play(); } }; //call the api callApi(); }, []); Thank you, Andrea

Thank you Rodrigo, that explains perfectly what I wanted to do, I'll try to implement it, and see how it goes. Cheers

Hi there, I'm new with gsap, and I would love to integrate it with my react projects. For what I understood, to use gsap to animate my elements, I need first to target them with ref and useRef(), I was wondering in case I need to create a grid based on data coming from an api call, let's say a not definied number of tiles with images, and I want them to appear with a staggered animation, how should I proceed ? I am a bit confused because I don't know how to target them with useRef() I hope that my question makes sense, in case I'm happy to clarify Cheers