Can you add Adobe Edge Animate to Webflow? How?

Design help General
1

Hi,

How would you add this Edge Animate to Webflow? Is it possible?

The files are available here:

Edge Animate gives you a few different option for publishing:

The drop down that you see in the image next to “Chrome Frame Installer” has three options:

  1. Now Prompt
  2. iFrame Prompt
  3. Overlay Prompt

These are the files saved when only “Publish content as static HTML” is checked. See “Publish Settings” image:

Is it possible to add this animation to a Webflow site?

If yes, any suggestions on how would be greatly appreciated.

Thanks,

Todd

2

Hi @TStanwood, it’s possible, but the only way to do it is if you host your files on Adobe CDN or if you host it on your own server and then display an iframe with the index file in Webflow.

That’s the way to do it before we allow for hosting of non-image files on Webflow.

3

@thesergie - would yourself or someone else have time to post a tutorial? I may be stuck here also. I may be implementing the iframe incorrectly.

4

Id especially like to know because my animations are responsive

5

Yea, an example using the files above that link to the Adobe Edge Animate would be great…

6

Can you guys share example files (dropbox it) so I can try to incorporate it?

1 Like
7

This would be helpful. I’ve been trying to figure this out since signing up the other day. Hasn’t proven as easy as I hoped it would be. I did get it to work outside webflow w/ my local server. Wasn’t pretty but it showed up… which was all I was trying to accomplish. Just wanted to narrow down what might be wrong before I yelled for help.

I couldn’t get it to show published on webflow. I believe it’s mostly because I couldn’t get how to link the files properly for them to show up on the published webflow site. I opened up the chrome dev tools… and the error had to do with the file linking. I’ll try to recreate it if that’ll help also. And I’ll send dropbox the files if the others haven’t.

Any help I can give… just let me know. I know for myself… I plan on using it frequently with webflow. Marrying to the two would great progress for what I’m trying to accomplish with my sites.

8

Hi @thesergie the “example files” are available here:

Can you use any of the “example files” in your test?

9

Sorry guys scratch what I said about Dropbox. Because you have to get a “public link” for each file, it won’t work. Edge animate files come with many files which have to be hosted in the same place and have to be able to access each other (dropbox doesn’t give you that kind of file system - each file is independent).

After you have them hosted on your own server you can follow these instructions found on the Adobe forums: Adobe ID

You’ll have to add this to your head code:

<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Bannerad_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-160548878 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

Replace Bannerad_edgePreload.js with the link to your server and the edge js file.

And in the Webflow add a div block with the class EDGE-160548878 and id stage and the .js file should inject your html animation file into this div block.

<div id="Stage" class="EDGE-160548878">
</div>
2 Likes
10

Hi @thesergie, I never set up or used a CDN. Who do you recommend I use to host the Edge Animate?

11

you can set up a folder in your site directory so the injected html knows what to find & where. (You can do what @thesergie said or embed an iframe and have the directory point that way) I used an iframe this time, but next time I’m going to try what @thesergie has suggested here.

If you have your own hosting system, don’t worry too much about adobe cdn, you can just select “adobe CDN” in your publish settings if you want the additional jquery files to be hosted online instead of your own directory. If you are publishing with webflow, I’m not too sure how you would go about having the additional files hosted, unfortunately.

12

also @thesergie - thanks very much. your help is appreciated as always. I implemented your “video background” tutorial for responsive design recently and it was great.

1 Like
13

I’m using the newest version of Edge Animate, which now has different publish settings and code involved. I haven’t been able to incorporate Edge Animate with Webflow. Does it now involve a different method?

14

Hi all. It seems like the info in this thread is no longer relevant as Animate has since changed. I’m hoping someone can help. Firstly, I can’t find CDN. How do I upload files to it? I can’t find any dashboard or uploader for it in Creative cloud or the Animate application itself.

I have Animate CC and have exported a .JS and HTML file of an animation. I’m wondering how I can get this into an embed widget in Webflow.

Thanks a lot.

1 Like
15

Edge animate is soo much better than animate CC… Adobe needs to recognize this. But I am curious to see how you guys implement this as well!