Teaching ChatGPT about Hype’s JavaScript API

Max Ziebell, a Tumult Hype power user and creator of several extensions, has posted a detailed method of training the ChatGPT mind on Hype’s JavaScript API. This method allows the AI to ask difficult questions and compose code for you. Max has also provided easy-to-copy snippets for teaching the API and encouraging the use of modern JavaScript practices and correct function formatting. In addition, he has requested that the AI include comments in its code responses. Check it out!

Easing Function Conversions

There are so many ways ChatGPT may improve your life as an interaction designer, animator and programmer. One thing ChatGPT excels at is conversions: as long as it understand what format you’d like your code in and can give some guidance, the system can write code with pretty high accuracy. Let’s say I want to add a new easing function to Hype… something like EaseInOutBack, but you don’t want to use the easing animation editor, or figure out the complex mathematics. Hype’s easing function uses this format:

function (t, start, dur) {
return t / dur;
}

Where t is the current time, start is the beginning of the animation, and dur is the total time. If we check out https://easings.net, a great resource for finding a wide range of functions for easings, we see that the easeInOutBack function typically uses this format:

function easeInOutBack(x: number): number {
const c1 = 1.70158;
const c2 = c1 * 1.525;

return x < 0.5
  ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
  : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
}

If you want to convert this to Hype format using ChatGPT, you would simply ask this question:

If you paste this selected code into Hype’s easing function editor, we get the same easeInOutBack animation:

And depending on whether you apply this to the ‘top’ or ‘left’, you’ll get something like this:

For a deeper dive into easing functions in Tumult Hype, read this post:

Converting from jQuery to Vanilla JavaScript

This example of converting an easing function to something usable in Hype’s timing function editor can extend to other useful conversions. Let’s say you wanted to use a jQuery function to select all elements with the class ‘myClass’ but want to avoid embedding the full jQuery library. Simply ask for a ‘vanilla JavaScript’ version, and ChatGPT will deliver a snippet you can paste in Hype’s JavaScript editor to run on the scene:

A learning partner

Beyond converting code for you, ChatGPT can help describe parts that you may not understand by adding code comments. If you encounter a useful code snippet on the forums or in our documentation and need help understanding and adapting it for your own purpose, ChatGPT is a great learning partner. Once you load the Hype API using Max’s instructions, you can ask it questions like the following:

The above explanation is absolutely perfect, and shows a correct knowledge of the Hype API. We hope ChatGPT helps take your animations to new and more interesting places as you leverage this tool.

We’ve just discovered a new place to quickly host your Tumult Hype animations. It’s called https://tiiny.host, and makes uploading your Hype exports to the web super easy. Get your animations on tiiny.host by just dragging over a zip file:

1. Select File > Export as HTML5 > Folder
2. Select your exported .html document and .hyperesources folder, right click, and select compress to add it to a zip file
3. Upload your zip file to tiiny.host.
4. Once uploaded you can choose your custom domain name, or use the built in tiiny.host domain.

Here’s how it works:

This will generate a unique HTML page (or custom domain, if you’d like). The service is hosted on Amazon’s CDN, is free to try for a week, but is $10/month for 5 sites.

For additional exporting guides, visit this page.

Update: The webinar replay can be watched here from the event on April 7th, 2021.

This webinar, hosted by our friends at Ajar Productions (creators of the popular in5 plugin for InDesign), is geared towards interactive publishers who want to take their digital books to the next level. It covers embedding content in InDesign, exporting with the powerful in5 plugin, and adding interactivity to your projects with Tumult Hype.

This webinar will show you how to create sophisticated animation & interactivity with Tumult Hype to level up your InDesign publication.
​

This guide, created by animation and interaction design veterans Daniel Connerth & Simon Widjaja, demonstrates hundreds of Hype features in a natural progression to introduce you to Tumult Hype’s animation, interaction, typography, and vector features.

The PDF & Epub guide includes 15 downloadable Hype files so you can follow along within Hype. If you don’t have Hype, download the 14 day trial and grab this guide!

For more downloadable Hype projects and tutorial videos, make sure you check out their other project RichContentDesign.com.

Below are a few pages from the book:

… and Polypane will load each layout at once:

Here’s a quick video showing the tool in action:

Tumult Hype 4.0.6 Update: Layouts in your Hype document are now used for Polypane previews and sending a new preview to Polypane will reload the page in an existing tab if a preview already exists.

Polypane Update: Read their blog post and watch the video about the new integration

Before reading, the first step is to download Tumult Hype. The trial is fully functional for 14 days. Tumult Hype has two flavor modes: Standard and Professional. For making custom timing functions (and following along with this article!), you’ll want to use Hype Professional.

Linear and Easing Timing Functions

Let’s say you want to animate a box moving across the screen. Over the course of two seconds you will have it move 300 pixels to the left. In generating an animation, the computer needs to determine the position of the box in time, and this is the role of the timing function. The most basic of these is linear interpolation, which divides evenly the distance by the number of frames. Thus a 30 frames-per-second animation would have each step move the box 5 pixels, as 300px / (2s * 30fps) = 5px. This successfully creates an animation:

To be subjective, this animation is bland! It moves without any natural physicality or weight. A viewer’s eyes must catch up to the speed the box is moving and then will likely overshoot their gaze when the animation abruptly ends. The most common solution is to apply a basic acceleration and deceleration to the box. This timing function is called Ease In Out:

This looks better, and is the most common choice for animations. It is the default timing function in Tumult Hype and most other animation tools for good reason.

Representation of Timing Functions

To be more precise, a timing function inputs the value of time (x) and outputs a value of the animated property (y). Recalling back to middle school algebra, f(x) = y-style functions are a form that can be represented on a 2D graph. The basic linear timing function looks as one might expect, a line:

Ease In Out is a gentle curve which shows how it will start and end at slower speeds:

This timing function is created with the mathematics of a cubic Bézier curve. By changing the control points affecting curvature, different acceleration and decelerations can be achieved:

The property values can even dip below the minimum value or above the maximum value, creating anticipation and overshoot timing functions:

Tumult Hype offers more power yet: several bézier curves can be combined to form multi-curve paths. These can be used for a variety of effects such as bouncing or elasticity:

General Reasoning for Focusing on Timing Functions in Your Animations

Nature does not move mechanically like the linear timing function above. Timing functions like easing therefore serve a critical role in humanizing the elements you are animating. This helps present information cleanly and clearly. It directs focus.

Good timing helps give meaning to animations. It turns lifeless shapes into reality. Some can help convey emotion which is critical to branding. Other timings can entertain and engage.

The movement of “inanimate” objects is governed more by physics. “Animate” objects are governed by their own thoughts and emotions. Both styles can be modeled with timing functions.

Applying Timing Functions in Tumult Hype

Editing the timing function of an animation in Tumult Hype is easy. Step zero is making the animation, so if you’re unfamiliar check out the tutorials and documentation.

To adjust a single animation’s timing function, you can double-click the animation indicator bar between keyframes in the per-property area:

If multiple animations are selected, you can use the Timing Function Pop Up Button on the right side of the timeline interface:

When no animations are selected, the default timing function is shown as the title of the timing function pop up button.

In Hype Professional, this interface allows for manipulating control points and adding new points on the curve to form your own custom timing functions. Timing functions can be named so they are saved for future use in the Hype document. They can also be set as the default timing function for any new animations:

This editor is similar to other vector editing apps. Here’s the cheat sheet to manipulate control points:

• Click on curve: add new point
• Delete key: remove control point
• Option-Click: Convert to angled vertex
• Option-Drag: drag out new control points
• Option (while dragging control point): mirrored
• Command (while dragging control point): disconnected
• none (just dragging control point): Asymmetric
• Shift (while dragging control point): Keep at 45° angles

Practical Tips for Using Timing Functions

• Crafting and choosing timing functions is a skill, experience will make one better.
• Let your animation “rest” by going a few days without looking at it, and see if you still like it when you come back. Or get feedback from peers.
• Looped animations should generally use a Linear timing function. Ease-based timing functions would create a stop point or jump at the start of the loop cycle.
• Avoid significant Easing In (slow acceleration) with animations that were triggered by user actions as it will feel sluggish.
• Overshoot (Back) and Anticipation (Reverse Back) can be effects that can look glorious, but often this goes against the purpose of an animation of helping a viewer associate actions. Further, these can waste a user’s time since they tend to take longer. Use sparingly.
• It can be good to experiment with using the same animation durations and different timing functions for more visual intrigue or to express differing weight/inertia. That said, unless animating from natural models or characters, it is better to not go overboard with too many different timing functions. Don’t forget to also experiment with staggering animation start times or slightly changing duration instead.
• Just as visuals often have a spec controlling line weights and color palettes, it is good to come up with a design language for animations including durations and timing functions used, along with rationale for what circumstances to choose which timing function.
• Observe nature and understand the mathematics of gravity/physics as this can help inform how to compose animations. For example, to make a bouncing object, the Y value should use the Bounce timing function. The X value should have a linear timing function because there are no forces acting on that axis. Even if well understood, sometimes it is just easier to use a physics engine.
• Get inspiration from nature or from master animators:
  • Timing for Animation by John Halas and Harold Whitaker
  • The Animator’s Survival Kit by Richard Williams

Conclusion

Manipulating timing functions is an advanced step in creating meaningful animations. They can help both model physics, emotion, or simply reduce keyframe construction. Tumult Hype’s custom timing function editor gives power and flexibility to help make your best animations.

The Rise of HTML5 Ads

It is well known that adding animation and interactivity in digital advertising makes ads more effective. Beyond catching visitors’ eyes, rich media ads can better convey the product or branding as well as add engagements leading to more clicks.

As rich media ads are visual in nature, it makes sense to build them using visual tools. Changes are seen immediately. Adobe’s Flash reigned as king of the visual ad creation tools for years, but has been toppled by HTML5’s compatibility on mobile devices. As a technology, HTML5 ads have the additional advantage of often being more accessible while having lower power requirements. But HTML5 itself is just a markup language and has no inherently included visual tools, as Flash did with the Flash Professional app. Building ads via hand coding would be a laboriously slow process. Luckily, there are now sophisticated visual tools that can output HTML5.

Tumult Hype is Your Visual Design Tool

Tumult Hype is the leading HTML5 animation and interactivity app for macOS. Hype’s raison d’etre is to be easy to use and quick to learn. Layout is similar to Keynote, and per-property animation keyframes can be automatically created with its quick “Record” functionality. Hype provides a powerful set of animation features, such as animation along curved motion paths, customizable easings/timing functions, simultaneously running timelines, and encapsulated reusable symbols. Coding is not required for most common interactivity, although JavaScript actions can extend its capabilities by integrating with other libraries and services.

While Tumult Hype can be used for a wide range of HTML5 content, it is especially capable for rich media ad creation. A plug-in system, called “Export Scripts”, can integrate ad platform features and help package its export output for delivery. Advanced Export functionality can further help automate export tasks. Hype’s runtime library is very small with a compressed size of 25KB, giving plenty of room for your assets. This runtime drives the animations and manages browser compatibility issues (though the app still gives warnings if a feature won’t work on specific browsers).

The Ad Creation Workflow with Tumult Hype

Grab Tumult Hype and an Export Script

Step zero is to download Tumult Hype. The trial is fully functional for 14 days. Tumult Hype has two flavor modes: Standard and Professional. For ad creation (and following along with this article!), you’ll want to use Hype Professional.

You can then optionally grab an Export Script, which will augment Hype with extra ad-related features. Currently there are scripts for Sizmek, DoubleClick Studio, and DoubleClick Campaign Manager. If you are using a different ad platform, the steps are usually straightforward to adapt the standard output.

You can verify an Export Script has been installed by looking within Hype’s Preferences. Export Scripts may also have options that are show in the Document Inspector.

Choosing an Ad Size

After launching Hype, you’ll want to set the scene size to match the ad you are creating. This can be done in the Scene Inspector by setting the width and height, or choosing one of the Preset Sizes. Hype contains presets for common ads banners and rectangles.

If your ad will have different size representations, you could make use of the Responsive Layout and Flexible Layout systems. Responsive Layout allows different content that is shown on width-based breakpoints. They can later be individually exported. The Flexible Layout system will adjust element positions and sizes based on container dimensions.

Importing Assets

Tumult Hype has basic shape and text primitives, but it is most likely you’ll be importing image assets from another program like Photoshop, Illustrator, or Sketch. These can simply be dragged to the scene editor or added via the Insert… menu item. Hype keeps a copy of the assets but will ask to update if it notices changes on the original to help when iterating.

You can later find assets in the Resource Library. One of the options here is to Automatically optimize when exporting. This feature is enabled by default and automates a few tasks:

1. Generates retina (@2x) and non-retina (@1x) variants of the images (the Hype runtime chooses which to load)
2. Reduces image sizes to the maximum dimensions used in the document
3. Attempts to compress images when feasible and if there is a file size improvement
4. Converts non web-safe image formats

While this is generally useful, it may work against file size goals for your ad. For example, overall ad file size is usually measured from the zip and not actual contents downloaded — as such having both retina and non-retina variants will add weight. Also you may be able to do better at visual compression quality or size than Hype can do in an automated fashion (using a tool like ImageOptim). You may need to uncheck this box.

Regardless, bitmap-based assets can add up fast. You may want to consider using SVGs, which are widely supported by browsers. Hype treats these as images, yet won’t attempt to optimize them.

As a side note, IAB recommends no more than 15 initially loaded assets to help keep pages lean.

Animating 101

Once elements have been created by dragging in assets or inserting text/shapes, they can be animated easily with these steps:

1. Hit the Record button
2. Drag the playhead to a later time
3. Change the position of the element or modify any other properties (like Opacity)

Recording is a UI shortcut for adding per-property keyframes. You can always manually create or edit them. This includes changing their timing functions to different easings or effects like elasticity and bounce-back. Position animations can be further refined by dragging a motion path to be shaped into curves.

A timeline in Hype can be thought of as a stream of animations. A scene in Hype always has at least one timeline — the Main Timeline. Multiple timelines can be created and run in parallel. This is often useful to animate specific elements in response to actions, or to maintain looping.

Symbols can play a similar role – they represent reusable “scenes within a scene” and contain their own elements and independently running timeline animations. Like other apps with Symbols, a change in one instance will be reflected in all other instances.

Adding Interactivity and Actions

The beauty of choosing HTML5 over a video/animated GIF is that it allows for interactivity and engagement with users. Interactivity is a response to an event. These events could be mouse clicks, drags, swipes, scene loads, waypoint hits, or even key presses. The action response depends on the goals of the creative. You may want to kickoff animations, bind animations to a drag, change scenes, or even trigger custom code. Within the realm of ads, typical tasks would be having a button click go to an external URL (also called an “Exit”) or triggering counters that can be reported back to the ad server.

Interactivity can be created without the need for code in most cases. These are the basic steps for running an animation in response to a mouse click:

1. Select an element
2. Go to the Actions Inspector and press the + next to On Mouse Click
3. Choose Start Timeline… for the action and select New Timeline… in the Timeline popup button
4. Name the timeline and then create animations

Export Scripts also can provide ad-specific actions that can be chosen in response to events. These will appear in the same Action popup list.

Additionally, the Run JavaScript… action can be used for any custom code, including invoking ad-related functions or calling the Hype API.

Previewing

It is important to preview an ad frequently while building to ensure that final animations and interactivity behave as you intend. The Preview menu allows for quickly changing between different browsers on your computer. If you hold down the option key, you can preview the specific scene/layout that is currently selected in Hype. Hype can also preview to an iOS device using the free  app.

If you are using an Export Script, its output can be included in the Preview as well. To do this, open the Preview menu and check a script underneath Preview Using Export Script.

Exporting and Delivery

Once your ad is complete, you’ll want to export for final delivery. The File > Export as HTML5 menu contains the Folder… option, which produced the default  .html page and corresponding folder of resources. This menu also provides any Export Script-provided options. These will automate packaging, generally stripping unnecessary resources and compressing to a single .zip file.

For further automation, you may want to use the File > Advanced Export… tool. This can split an ad into specific scenes or layouts, and also make use Export Scripts.  File > Export as Movie provides some static image/video options if need be, too.

Conclusion

Those are the primary steps for creating a rich media HTML5 ad with Tumult Hype! As a visual tool, Hype can significantly speed up the creation and iteration process without limiting in features or functionality. The ad-specific workflow features in Export Scripts automate many common tasks for digital ad production. These Export Scripts can be built or modified by anyone, so if there’s an ad system or automation that doesn’t exist you are free to build it!

If you’re interested in learning more, there’s documentation and tutorials on the Tumult site. Hype is available for a 14-day fully functional trial and costs $99.99 USD for the full Professional version.

In this post, I’d like to introduce a new WordPress plugin for embedding interactive and animated content in WordPress: Tumult Hype Animations for WordPress. For a quick walkthrough of how to use this plugin, watch this video.

If you’re not familiar, Tumult Hype is a powerful tool for building advanced interactive and animated content that works on any device. When you open Tumult Hype for the first time, you’re greeted by a blank canvas with a timeline below. Content you add to your scene can easily be animated using the record button and manipulating the timeline. As you explore the program you’ll find powerful features for a range of interactive production: motion curves, custom easing transitions, touch gestures, web font support, audio actions, a powerful physics engine, and responsive layout features.

The Hype Animations plugin for WordPress makes integrating your HTML5 animations in your WordPress blog a painless drag & drop process. The plugin can be installed and activated in a minute from the WordPress Plugin repository by searching for ‘Tumult Hype Animations.’ Installing the plugin allows you to add exported Tumult Hype animations to posts and pages using simple textual shortcodes. You can update previously-uploaded animations from the plugin’s administration page and copy the full embed code to place your animation elsewhere (outside of WordPress, even). This allows you optionally leverage your WordPress site as a simple hosting platform for your Hype animations.

Let’s say you’re building an interactive map you want to keep updated on a regular WordPress page. Instead of just reuploading a static PDF, you can quickly create an interactive map in Tumult Hype. To start, create a Tumult Hype document with a width as the maximum size of your blog’s width. If you have a responsive theme, you can even have your animation expand and contact with your theme. If you’d like to test this process out, download an unrestricted (14 day trial here). In the example below, our maximum blog post width is 463 pixels wide, so our scene size is set to that number:

Next, you can build out interactive features in your document: setup your document to respond to mouse hovers, update any road closures, and create any type of interactivity to make the map more interesting and useful. Once you’re happy with your document and you’ve previewed it using the built-in browser preview and the free mobile preview app Hype Reflect, the next step is to prepare it for the WordPress plugin.

Packing up a Hype animation for the plugin is simple. The plugin requires animations are first exported in the OAM format, which creates a zipped package containing all JavaScript, media, and code required to display your animation. This is the same format for embedding in applications like Adobe Muse. To export in this format, select File > Export as HTML5 > Export as OAM file. Switching over to your WordPress site, start a new Page or Post. With the plugin installed, click the new ‘Hype Animations’ button to the right of the Add Media button:

Drag and drop your OAM file on the resulting overlay, and your animation will upload, and the plugin will generate a shortcode and automatically add it your post or page:

Leveraging CSS Styles and Responsive Layouts

When embedding your animation, the plugin uploads the Hype JavaScript runtime, resources, and animation data and creates a reference to it with JavaScript on the page as a standard DIV element. Since the embed is on the same page as your WordPress theme, you can access any CSS styles or fonts you currently use in your WordPress theme to seamlessly incorporate design elements in your animations. This allows you to leverage any web fonts or CSS components you’ve already setup in your site. You may need to uncheck ‘Protect from External Styles’ in the document inspector to leverage external CSS styles.

For your responsive WordPress theme, you can also mirror your theme’s breakpoints in Tumult Hype so your animation adapts to all device sizes you wish to support:

In the Scene Inspector, you can easily set the desired breakpoint for your individual layouts. For more information about setting up responsive layouts in Hype, visit the documentation.

Additional Interaction and Export Features

You may choose to only start your animation when visible by using an ‘On Enter Viewport’ action. Setting this up is as easy as selecting a dropdown menu in the Action inspector:

Don’t limit yourself to just HTML5 exports of your projects. For social media sharing, you can easily export individual frames, animated GIFs, or even video directly from Tumult Hype. These export formats can be used for the featured images assigned to your WordPress post, as a Social Share card on Twitter & Facebook, or even as a video teaser.

For more information about the plugin, please join us on the forums.

Technical Notes:

Below are a few technical notes on how the WordPress plugin works. For more general information about Hype, visit the Hype FAQ page.

• All uploads are kept in your wp-content folder on your WordPress installation, and there’s no need for any additional server infrastructure.
• The embed code is a non-render blocking JavaScript embed. You can optionally switch from embedding the Hype animation as an iframe instead of a DIV. This might be preferable if you require access to code added to the of your Tumult Hype document.
• Easily track events or interactions on Google Analytics with minimal code. Learn more here.
• Read variables from your WordPress post and use them to control your animations: For example: TolumneMeadowsRoad = closed; Learn more here.

Tumult Hype runs off static JavaScript, HTML, and CSS, so it doesn’t out of the box require or any server side technologies. You can completely avoid any server-side language and make use of the contents of a regular text file. To use the contents of a text file anywhere in your Hype document, you would use a simple XMLHttpRequest which loads a remote URL and grab its contents:

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
//allText = txtFile.responseText;
//lines = txtFile.responseText.split("n"); // Will separate each line into an array
var customTextElement = hypeDocument.getElementById('RedRobin');
customTextElement.innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null);

The code above will load the contents of the text.txt URL, and then place it within Hype Element with the ID: RedRobin.

Because of security restrictions, you will only be able to load this on a locally running or remote server. If you receive XML warnings, you may need to adjust your Cross Origin Resource sharing settings on the server containing the .txt file but this should work as is.

Some details about how this works: The above technique pulls in regular text (as a ‘string’ in JavaScript parlance) but you could easily convert it to a number using parseInt(). You could use parseInt(txtFile.response); to ensure you have a real number. This would return ’33’ if the contents of the text file was: “The answer is 33.”

Of course, this technique can pull in data from any number of text files to load different data. To download this basic example, visit this forum post.

Thermometer Hype API Example

For a practical example of how this type of live data can work with your Hype animations, here’s an example Fundraising Thermometer that uses a single number (representing the amount raised) to run an animation. This little guy was created to help my favorite non-profit Global Glimpse to raise some dough (They quickly surpassed their goal!). This number is currently hardcoded into the JavaScript function we use, but it could easily be retrieved from another plain text file.

For example, you could include the ‘raised amount’ variable within hidden text in a WordPress post. Any time you edit that value, the thermometer would reflect the change. You would use something like:

Below is the file, which can also be downloaded here.

And here is the code that controls this contraption:

    // Insert the amount raised
    var raised = 5000

    // And the goal (don't use commas)
    var goal = 40000

    // show these numbers wherever the goal or 'raised amount' is used,
    // and make sure it looks like a number with correct comma placement. 
    document.getElementById('raisedamount').innerHTML = raised.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
    document.getElementById('goal').innerHTML = goal.toString().replace(/B(?=(d{3})+(?!d))/g, ",");

    // No need to edit this: 
    var difference = goal - raised
    var raisedpercentage = difference / goal
    var topflask = hypeDocument.getElementProperty(flask, 'top');
    var currentthermheight = hypeDocument.getElementProperty(flask, 'height')
    var newThermsHeight = currentthermheight * raisedpercentage

    // This is the speed and easing transition of the height of the Thermometer's red portion:
    hypeDocument.setElementProperty(flask, 'height', newThermsHeight, 2.0, 'easeout')

    // Move the arrow as well:
    var topflask = hypeDocument.getElementProperty(flask, 'top');
    var toparrow = hypeDocument.getElementProperty(arrow, 'top');
    var arrowmovement = (toparrow - topflask);
    var thisthat = arrowmovement - (raisedpercentage * arrowmovement); 
    var newpositionarrow = toparrow - thisthat;

    // You may want to edit the 'easeout' transition at the end here:
    hypeDocument.setElementProperty(arrow, 'top', newpositionarrow, 2.0, 'easeout')

This thermometer can easily be resized, modified, or copied into your document.

So far, our examples haven’t been ‘live’ in the true sense. They are pulling static data from a potentially ‘live’ source, but they won’t update automatically if the source of their data changes.

This post from Hans Classen on our forums demonstrates how to extract the contents of a CSV file, and display it within a Tumult Hype document. It requires some server-side code to fetch the CSV file, but then its data is handled entirely within Hype and used to control a voting map. View the page here.

This document makes use of a sprinkling of jQuery and the CountUp.js library to easily animate the increasing value of a number.

And here’s another approach by Mike Heavers which pulls in data from an external file.

If you’re working on Infographics or working with live data, we’d love to see your work! Please get in touch on the forums or @hypeapp.