Streaming live at 10am (PST)

Help getting my head around incorporating an animated graphic on my site

Hi,

I have this website I’m about to publish, for my own graphic design work. I thought I’d like to animate my logo, so I had a try at it using the very old adobe Animate Edge which I’ve had sitting around forever.

Now I find that I probably can’t incorporate that into my site, so I’ve been trying to get my head around the options.

There have been some 3rd party options mentioned, like Hype. according to their website I could use that in Webflow if I go for a CMS plan, which I wasn’t planning to do.

There’s the animation from within Webflow, but I think that would be a pretty bad option for what I want to do (I might be wrong though)

There’s this Lottie thing, but to use that I think I need After Effects to make the initial animation. I don’t have access to that. I don’t have a full grasp of all these interdependent technologies.

I know no coding stuff, I tend to be a bit baffled at the discussions around animation as they often reference things I don’t understand, but I can use a timeline animation tool, and I can use Webflow to a degree.

If someone can help me understand what I need to use to make the animation, and how to incorporate it into Webflow, preferably at free or low cost, without After Effects, and preferably without needing a CMS plan, I’d be eternally grateful!

Here’s a link to a youtube vid showing my animated logo, playing in a browser. (the only way I could think of to display it!)

and here’s the link to my website with the static svg logo.
https://preview.webflow.com/preview/simongregorydesign?utm_medium=preview_link&utm_source=designer&utm_content=simongregorydesign&preview=4714d60050fa81f68d3334d73ed9242c&mode=preview

thanks, Simon


Here is my public share link: https://preview.webflow.com/preview/simongregorydesign?utm_medium=preview_link&utm_source=designer&utm_content=simongregorydesign&preview=4714d60050fa81f68d3334d73ed9242c&mode=preview
(how to access public share link)

Well that wasn’t terribly encouraging.

Are you wanting the animation to loop or just play once? It should be pretty easy to save out a looping GIF that you can use within any Image element.

Obviously using a Lottie animation with vector art would be preferred as you’d have more control and (more than likely) smoother animations, but since it’s a short animation with limited colors you should be fine using an animated GIF.

Ok, thanks for that. I was thinking just once, or perhaps also as scrolling into view.

I guess I had the impression that a vector animation would be pretty easy to get going and incorporate, but I could do a GIF I guess, or just leave it unanimated.

Thanks for the input.

Ah okay, if you’re looking to have some more control you can definitely animate objects individually using Webflow interactions.

Since the animation is relatively straightforward, just save out the wordmark by itself along with a single spark that you can duplicate and position as needed. Then it’s just a matter of recreating that animation natively with IX2 in Webflow.

Once you’ve got the animation looking good, you can trigger it to play (and even loop) based on things like hover, scroll position, page load, etc.

Hopefully that helps!