How I used SVGator for animated graphics on zipmessage.com

Hey there brian from zip message here, I thought I would do a quick video to show you uh the upcoming zip message website redesign and how I used SV gator to create some pretty cool animated images.

So I'm going to scroll down and this second section has these three call outs.

And here I used sp gator to try to create like really subtle movements and sort of, the idea for these came from stripes website where they have really kind of subtle, like you almost don't notice it at first and then and then something moves, which kind of catches your attention kind of cool.

And then um as the page goes down this section, I'm showing how the product really works and the animated SVG s again, I created everything, all the animations using Sp Gator.

Um these really help to show how the product actually works.

Um and uh I think the movement really helps with that and so I created a couple of those here and then um then I did one more section.

If I scroll down further here, we're kind of walking through kind of like all the features or the rest of the features and these top four we want to highlight.

So when you hover over them, it starts the animated SVG.

Um of course these still work when they're in static mode, but you can just hover over them to get a little bit more movement going here.

So yeah, it's been a really cool tool to use and it's really helpful for, I think getting the message across uh for how is the message works.

So I thought I would actually show you my sp gator account and walk through some of those images.

So um yeah, here is uh that one uh which basically shows the screen recorder, the screen video recorder, and uh it's pretty quick, all these are only about five seconds long, five or six seconds, but um, you know, I have quite a few opacity changes and movement and that sort of stuff, so, um yeah, I found it really helpful to be able to use this interface to create an animated SVG.

Um let's look at one more.

Uh well look at one of these.

So this is, you know, supposed to show how conversations get lost in a zoom call.

Um so really simple, just having these things kind of like pop open and, and so the way that that actually works is you can see how start small gets really big and then it pops down to size and so it's a combination of opacity and the scale animating there.

And I did a lot of like playing around with the actual timing of these so that it works uh on the page.

I wanted these to be sort of like staggered kind of movement, moving like very subtly every now and again.

So, um, yeah, it's been a really great tool, I'm really glad that I, that I stumbled upon a couple weeks ago because I've been sort of looking to do more of these in my in my websites, especially for my products that message.

Um, and it's really just perfect for that, So thank you for making it