Embedding your HTML5 animation in Webflow

Webflow is a popular online website creation platform. Embedding a Tumult Hype animation is a simple process, and is similar to our instructions for Wix and Squarespace.

You'll need to make sure you have a CMS plan in Webflow and you have access to the 'Embed' Component, which looks like this:

Screen Shot 2020-07-09 at 1.29.50 PM

The brief instructions are:

  1. Get your Hype document on the web so it can be loaded over an https server.
  2. Drag an Embed Component into your Webflow design
  3. Paste your embed code, and use the full URL of your generated JS file in your embed code.

An example embed code that you could place in a Webflow project:

<div id="hypechickenexample_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:160px;height:220px;overflow:hidden;">
	<script type="text/javascript" charset="utf-8" src="https://themorgantown.github.io/responsive-hype-embed/example/hype-chicken-example.hyperesources/hypechickenexample_hype_generated_script.js?94255"></script>
</div>

Getting your Hype Document Online

Basically, we want to get our Hype document on the web somewhere, so we can load the generated JS file in Webflow. Make sure your server has a https certificate and that you can load all your content over https://. Below are steps to get your Hype document on the web, but you can skip to the next section if you already have your Hype document online.

  1. Select File > Export as HTML5, and get your Tumult Hype document exported to desktop.
  2. If you have a webserver, upload your document there (read our tutorial here). One of the easiest hosts is Amazon's S3 service, but another easy option is Github Pages.
  3. Using a program like Transmit, drag exported .html and documentname.hyperesources folder into your S3 or webserver. Make sure it has a 'read' property set as 'World', or if you are uploading it to an FTP server, make sure you can load the content from the web. In the example below,
  4. Next, get the full URL of your documentname_hype_generated_script.js file for the next step. It should be something like https://example.com/hype-chicken-example.hyperesources/hypechickenexample_hype_generated_script.js

Modifying your Embed Code for Webflow

  1. Once you're certain you can embed external content in your Webflow Project using the 'embed' component, drag the component to where you want to place your Hype document.

  2. Once you drag the Embed Component to your webflow area, a custom code popover appears where you can place your Hype document code.

  3. We're going to open the exported .html file we exported to our desktop to create an embed code. Look for this DIV in your exported .html document:

     <div id="hydechickenexample_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:160px;height:220px;overflow:hidden;">
     	<script type="text/javascript" charset="utf-8" src="hype-chicken-example.hyperesources/hypechickenexample_hype_generated_script.js?97218"></script>
     </div>
    
  4. The above div would load our Hype document from a folder at the same level, but we want to modify the 'src' of the script to load from our webserver, so the full code would be:

  5. The above code assumed I uploaded my 'hyperesources' folder to a web server at the https://themorgantown.github.io/responsive-hype-embed/example/ folder.

  6. Insert this modified code in the code editor component:

  7. Select Publish, and view your document.

  8. As a side note, Whisk is a great way to quickly test if your embed code is working:

Responsive Notes

Components in Webflow are flexible, responsive, and depend on their parent element's size. In the above example, I'm placing the element inside of a container, which contains the centered 'embed' component:

Note that Hype sets a margin:auto property on elements which centers them inside of their own container. Embedding a Hype element in a large container will ensure it is fully centered. If the space becomes smaller (and the Hype document doesn't have a % based width) it will cut off the right side of the Hype scene.

If you are creating a responsive Hype document, here are some tips:

  • I recommend setting a responsive width only for your Hype projects if you are making a responsive document, not a responsive height.
  • If you already have a Hype document with a responsive width and height, and you want everything to adjust size proportionally, but you know you want your Hype document to fit a space shorter than a height of (for example) 400 pixels, you can set a minimum height in the right sidebar for the embed element: Screen Shot 2020-07-09 at 2.11.55 PM
  • If you want to create different layouts for different breakpoint widths, use responsive layouts in Hype. The layout shown will be determined by the available width of the embed component, not by the actual device width viewing the page. Webflow lets you use different components for different layouts, so you can hide an embed component at a larger breakpoint and create a new Hype document for smaller breakpoints. More info on this: https://university.webflow.com/article/display-visibility
  • To test responsive layouts in Hype to see what layout size to use, use the embed code referenced here to determine your available space.
3 Likes

Thanks so much for this Daniel. I've been getting into Webflow in a big way the last few months and I'm transferring my old site across to it. This helped a lot.

One thing I found out was that it is possible to host the JS files on Webflow itself. You simply have to rename these to .txt files instead of .js — you can then use the link generated by Webflow to link to these .txt scripts and define them as type="text/javascript" in the script call.

1 Like

Very smart!

You can also inline the runtime and the entire generated JS file, and avoid any hosting altogether: Question for exporting an ad for website (Inlining all JavaScript in one file) - Single HTML page (this assumes all your images are inline SVGs or referenced from another host)

1 Like

Alas, issue with inlining this way, is that Webflow has a 10,000 character limit on embeds, along with the same limit for scripts inlined in the page or project, which is easily surpassed sadly. :slightly_frowning_face:

You can also link the runtime from the Hype CDN using advanced export. This brings down JS size hosted by webflow. Maybe that helps…

1 Like