lessing

Hi there, I have this animation made in After Effects. I've exported it as a Lottie animation for now, but I'd like it to be driven by a Google Sheet of location coordinates. The goal is for this to run as a hero animation on the website, without me having to do anything when a new location is added. Instead, the marketing team would simply enter map coordinates in Google Sheets and yet another dot would appear on the map. Is GSAP a potential solution for this? Thanks

Thank you both, that's so kind! I knew it couldn't be that hard Regarding which method: I did think about morphing instead, but manually creating keyframes to morph between in Illlustrator seemed a bit tedious. Problem is, most filters (e.g. waves) in Illustrator do not have a "time" property for obvious reasons. Another alternative I was considering was to generate a GIF in After Effects, but the aliasing would probably be nasty. Maybe one could use 20 PNGs to cycle between and still get a decent size?

Thank you Jonathan! I understood the principle of providing two values for X,Y, but I don't get how I animate them in GSAP? In the SVG i type baseFrequency="0,0" then I want to animate only the second variable, so I would expect either TweenMax.to("#turbulence", 8, { attr:{"baseFrequency":"0,0.1", repeat:-1, yoyo:true }); or TweenMax.to("#turbulence", 8, { attr:{"baseFrequency":[0,0.1], repeat:-1, yoyo:true }); But I can't get it to work? How do I feed GSAP with a string that's actually an arrayish thingie? Also very interested in where I should put a rotation of the filter, as I've tried pretty much every node in the SVG tree and nothing works ;(. Thank you!

Hi there, trying to get this girls hair waving from wind. Obviously the parameters are not set to look like waving hair just yet, I've set them to show you my problem: The waves are coming in horizontally. I get that this is a property of the feTurbulence filter, but I just can't for the life of me get the SVG right to animate things vertically instead! I was trying to separate baseFrequency into baseFrequencyX and baseFrequencyY to be able to animate them separately, but it's not working for me. So either I need to somehow rotate whole/parts of the SVG filter, or animate the baseFrequency matrix. Anyone who has a clue? Thank you!