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:
Add the code to the “custom code” field of the current page
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
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.
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
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.
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:
Edit: also if your animation needs to be responsive, the person who created the artwork will need to publish it to fill stage 100%.
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.