iotron

Thank you so much for the ideas. The buildings are the heritage of my city Kolkata, that's why I want to make the animation special. But my experience with animations is limited that's why "With a little masking and maybe even subtle parallax like movement overlay gradients etc" is out of my scope of imagination. Perhaps you can point me to any codepen with a similar effect so that I can try to figure out how to implement it. Thanks a lot. Your two cents are greater than my animation skillset. ❤️

Sorry, my bad. I forgot to mention that the SVG is already optimized from SVGOMG. I am working on the SVG in Adobe illustrator. I have optimized the number of paths but it's still a lot because of the intricate design. So, there are a number of options I am thinking of trying, on which I would like your opinions. 1. Merge some of the paths into compound paths, lessening the number of paths. 2. Replace drawSVG with less resource heavy animations like opacity/autoAlpha toggle. Thanks a lot for the help. ❤️

Hi, the animation is running a little sluggish on some devices, probably due to a large number of paths. Any ideas on how to optimize the SVG or the animation for better performance without compromising much on the design? Thank you.

Hi, should we have a compound path in SVG or multiple single paths grouped for better performance in the draw SVG plugin? Also, is there any tutorial to efficiently design SVG for better performance with the plugin? Thank you.

Hi, I am trying to change the fill color in the colorAnime function so the elements get randomised colors on each loop iteration. Kindly help, right now the fill doesn't change after the first iteration. Thank you.

Hello, I am using the GSAP platform to build the landing page of our company website. I am still an amateur in GSAP and a noob in animations. This is the first SVG animation I have made from scratch, so I would like recommendations for improvements. 1. I would like to implement a circular wave animation similar to the Codepen below on the datacentres (dots on the globe). On hover/click, a circular wave animation would go out from the point of the event toggling the opacity. I have figured out the function from the codepen. I need some help understanding the function. I am trying to understand how to pass the "from" object passed from mouseevent click on svg paths I have isolated with datacentres variable. ``` $('.c').on('click', function(e) { staggerAnim.eventCallback('onComplete', null); // An approximation that works okay var gridX = Math.floor((e.layerX - (e.layerX / c.width * 2 - 1) * 20 - e.layerX / c.width * 75) / c.width * cw); var gridY = Math.floor((e.layerY - (e.layerY / c.height * 2 - 1) * 75 + 40) / c.height * ch); var i = cw * gridY + gridX; staggerFrom(i); //console.log(gridX, gridY, i); }); ``` https://codepen.io/creativeocean/pen/JjRNgNw 2. The connecting waves need a little glow and a trailing fade to make them look more realistic. I currently have no idea how to implement them. (SVG filters maybe?). 3. I would like the fill to change periodically from an array of colours in the blinkAnime() function. Can we implement it within gsap.to or use gsap.ticker function? Any other recommendations, link to tutorials, ideas are welcome.

Hi, I am trying to add a drawSVG and text animation along with the morphSVG on the same scrolltrigger. I can't figure out where it's going wrong. Kindly help, @GreenSock https://codepen.io/iotronlab/pen/MWQEXXp

This thread is a goldmine. Kindly pin it. Much love and kudos to the whole community and specially the core GSAP team. ❤️

Thank you so much, it's perfect! ❤️

Hi, I want to create a pinned section to morph the SVG and then continue scrolling much like this example. Unfortunately, I haven't been able to figure out how to pin and morph the SVG. Kindly help. Thank you. https://codepen.io/akapowl/pen/zYqLyPQ/6a2480c123d88dc391faba0ea5cc590f

Hi, thanks for the help. Much appreciated. How can we add transition animation to the letters like slide-in-y?

Hi, I am new to GSAP and animation. I have tried to create this animation to cycle words from an array. But the animation came out to be somewhat stiff cause I am a noob. 😅 How can I make the animation a bit smoother, like make the letters slide down like a casino while scrambling. Also, the word is not revealing letter by letter as was in the scramble text demo. Kindly help. Thank you.