Streaming live at 10am (PST)

Using HTML animated graphics in place of static ones


#1

Hello! My first post on this forum.

I'm new to HTML animation and want to use it in a site I'm creating on Webflow (share link included below).

There are 4 graphics in the 'hero' section of the home page that I want to animate. The ones in place at the moment are static PNGs, and I want to replace them with animated versions. The ideal scenario is that the animations are hosted where the Webflow site is hosted and not on some other third party server.

I have decided against using Webflow's interactions as that doesn't seem to quite do what I want, so to avoid the time and heartache involved in learning how to code the animations myself from scratch I'm trying a third party animation app which produces the kind of effect I want and exports HTML that doesn't have to be hosted on the app creator's server, together with an embed code.

I have a first animation ready and want to try it out on the page as an iframe. All the PNGs used in the animation are already uploaded to my Webflow site assets.

I've tried creating a new page in Webflow and inserting the animation's code into the head and body, but I get an error message saying that the head code is over the allowed character limit.

So, I thought perhaps I could upload my animation HTML, which is in effect already a standalone page, in its entirety to Webflow and use the embed code I have to position the animation where I want it to be. However, I can't find a way to upload an HTML page. Images, yes, but not HTML.

So I'm kind of stuck. I'm wondering if there is a solution to this or if I am going to have to abandon this route and try some other method of getting my animations done? Any advice/pointers will be gratefully received!

Many thanks
Paul


Here is my public share link: https://preview.webflow.com/preview/secaura-b448d9?preview=aa37ef928c9ae9cb2f98fed60069463a


#2

Webflow isn't really meant for what you are trying to do. There is no way to upload any pages into webflow. I honestly think it would be well worth your time to learn the interactions feature as it is going to likely be far more powerful than your alternative and also be completely responsive and cross browser compatible.


#3

Paul,

Your situation has gotten me quite interested. I personally only use webflow for design as I have actual back end need on my projects which depending on the project require php / asp / cgi.

I will start looking for a simple solution inside of webflow but unfortunately that may not exist. Outside webflow code is too easy to accomplish this but you may not feel comfortable editing local files.

Is there a reason why you want to animate PNG files instead going to a website to turn them into an animated gif?

Happy Webflowing,

dL0


#4

Thanks guys for taking the trouble to reply - you don't have to, and it's much appreciated that you do.

Apologies for taking so long to respond, but the weather's been WAY too good here in Scotland this weekend to be indoors poring over work!

DFink - I agree Webflow isn't quite ready for this, and I did look at interactions as a way of doing it, but that seems best suited to one-off animations of individual elements rather than infinitely-looped animations with multiple frames.

dL0 - Please don't spend any more time looking into a solution (unless you want to, of course)! I've got round it by hosting the animation on my own domain and using an embed code to reference it. Working fine for the first test animation, as you can see from the test site http://secaura-b448d9.webflow.io/. When the time comes to export the code for use on my client's server I'll copy all the animations there and amend the embed codes. I decided against animated GIF as I need transparency throughout (the background it's on is fixed and the graphic's position will depend on screen size, device, etc) and PNG transparency is much better quality.

Now to animate the other three!

Many thanks again to you both for taking the time to respond.

Cheers
P


#5

You can use the loop function to loop any interaction you create. I think if you dive in, you will be pleasantly surprised by how much power you have.


#6

I know - I may have dismissed it too quickly Dave. I guess I was getting a bit frustrated trying to work things out. I WILL take another look, just in case you're right! :wink: Thanks again.


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.