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:
The brief instructions are:
- Get your Hype document on the web so it can be loaded over an https server.
- Drag an Embed Component into your Webflow design
- 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.
- Select File > Export as HTML5, and get your Tumult Hype document exported to desktop.
- 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.
- Using a program like Transmit, drag exported .html and
documentname.hyperesourcesfolder 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, - Next, get the full URL of your
documentname_hype_generated_script.jsfile for the next step. It should be something likehttps://example.com/hype-chicken-example.hyperesources/hypechickenexample_hype_generated_script.js
Modifying your Embed Code for Webflow
-
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.
-
Once you drag the Embed Component to your webflow area, a custom code popover appears where you can place your Hype document code.
-
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> -
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:
-
The above code assumed I uploaded my 'hyperesources' folder to a web server at the
https://themorgantown.github.io/responsive-hype-embed/example/folder. -
Insert this modified code in the code editor component:
-
Select Publish, and view your document.
-
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:
- 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: Conditional visibility | Webflow University
- To test responsive layouts in Hype to see what layout size to use, use the embed code referenced here to determine your available space.
