Streaming live at 10am (PST)

Embed Adobe animation on webflow


#1

Hello webflow-ers,

I got an animation from my illustrator created in Adobe Animate CC and have to include it on a website I am creating with supa-dupa webflow. The animation is made up of an html file and a js file.

How do I include the animation on my website?

What I tried:

  1. Add the code to the “custom code” field of the current page
  2. Host the js file externally and call it on the “custom code” field

Not had much luck so far. Can share html and js files if needed.
Any help would be much appreciated :slight_smile:

Happy holidays everyone
M


Adobe animation on Webflow
#2

Please do share…


#3

Hey @samliew thanks for the reply.
Here they are:

https://drive.google.com/drive/folders/1CQkKzd3fEKdI857C1QZjZJDSPpMGkZ2G?usp=sharing

Thanks!


#5

Demo: http://adobe-animate-demo.webflow.io

The image has to be uploaded to the project, then you grab the full path and replace it in the landing_illu.js file, then this js file has to be hosted externally.

Then include all scripts in the page footer, and then paste the body HTML or re-create it in Webflow designer.


#6

Hey @samliew wooohooo… great, thanks!

Few things that aren’t clear yet:

  1. Shall I simply upload the image to the project assets?
  2. How do I grab the full path? And where on the js file shall I replace it?
  3. Which scripts shall I include in the footer? The ones in the html file?

Might be easier to include a share link for the demo website you created above (http://adobe-animate-demo.webflow.io) so I could “get inspired” :laughing:

Hey sa, thanks for your tie and effort trying to help me out.
Much appreciated.

Mattia


#7

The same way you upload images to the designer.

Once the asset is uploaded, click on the icon on the image.

Search for the filename.

Yes, all of them.


#8

Hey @samliew can’t manage to get it to work :frowning:
Folowed all the above but for one reason or the other can’t manage to get it to work.

Could you please share with me the website so I could understand how you did it?

Thanks for the Christmas present :laughing:
Mattia


#9

Here you go

https://preview.webflow.com/preview/adobe-animate-demo?preview=4c2aa9dabdfb3f1fd8f925c8e1b773cb

Expires in 1 month.


Also, feel free to contact me for further code help and/or customization of third-party plugins


#10

@samliew thanks. That helps big time :slight_smile:

A couple of extra questions.

  1. How can I make the animation span 100% width and height? Currently, it is 1920x1080 creating a nasty horizontal scroll bar. I tried to replace the specified width and height with 100% but didn’t work. Also gave the html element 100vw and 100vh still without luck :dizzy_face:

  2. Is there any ways to get the animation to load at the beginning of the ? Currently, the animation has to wait for the entire page to load before even displaying which has obvious shortfalls for user engagement. Any idea on how to go around this would be much appreciated.

Thanks and happy Christmas!


#11

I’m travelling at the moment, but if you can request for a consultation here, I’ll get back to you when I’m free: http://webflowexpert.com


#12

I did this a few years ago but used the method outlined by adobe, which works well because you can assign the responsive properties to your blank holder div in Webflow. You can see my interactive graphic here:


(I also did another on the homepage)

All of the animation files are hosted externally merged using the blank element’s ID. Steps are outlined here:
https://forums.adobe.com/thread/1120897

Edit: also if your animation needs to be responsive, the person who created the artwork will need to publish it to fill stage 100%.


#13

Hello Chaps,

Can anyone help?
Originally followed everything as specified in this post. Had to change the animation being used and did the entire process over again. However, it is not working any longer. Tried to debug with the console but couldn’t spot anything out of order.

Published project:
http://fablab-berlin.webflow.io/

Designer
https://preview.webflow.com/preview/fablab-berlin?preview=2a9ba6c9a97e9299fba527c51f7060d5

Any help would be aaace :slight_smile: