I’m not a fan of Adobe’s subscription model, and learning After Effects is way down my to do list. So, how do I create animated graphs, charts, and interactive graphics? I use TumultHype Pro, for a far smaller price and way shorter learning curve!
With Tumult Hype, you can create videos, gifs, and fully embeddable HTML and Java-based interactive graphics and animations. And you don’t need to write a single line of code. Well, not unless you want to. You can see some examples here, here, and here.
Here, you’ll learn how to create a simple ‘reveal’ animation of a graph plotted in Excel and formatted in Affinity Designer (another fantastic, cheaper, and genuine alternative to Adobe Illustrator).
I’m going to animate a plot of the average temperature in Denmark throughout the year, and create a video in which the data are revealed from left to right.
Follow along using the instructions and the video, below.
Part one: Assemble and get ready to animate
1) Open a new document and insert your images. You’ll need (1) a background image (containing the axes, scales, and heading) and (2) your data (with transparent background). I also have another image as a title for the data series (again with a transparent background).
2) The images will appear as layers in the timeline panel towards the bottom of the screen. Order the layers so that the background image is at the bottom and the data are above. Go to the document display to position everything as you like.
3) Select the image (data) that you want to animate, by clicking on that image in the timeline panel. With this image selected, go to the top of the screen and click “group.”
4) This creates a kind of clipping mask, with the data inside. Resize the clipping mask if needed, so there is a little bit of space on either side of the data.
Part two: Time to animate!
Animation is easy in Hype. It works with timelines, and has a really neat record function whereby you click ‘record’ and act out the animation you want Hype to do, e.g. reposition elements, resize, fade in or out, add actions on click or scroll, etc. Hype records all of these actions and creates the animation script for you. So, no coding!
5) Go to the timeline panel again, and make sure you have selected the image (data) that you want to animate – it should be highlighted in blue.
6) Make sure you start with the time curser at zero (seconds) in the timeline, and resize the clipping mask/group box again so that it is just off to the side of the data.
7) Click the record button, and move the time curser to 3 seconds. Then, resize the clipping mask/group box back to where it was, so that it covers all of your data again. Click record once more to stop recording.
8) Press play, and… oh wait… nothing happened. Why? We need to do one more thing to make the clipping mask, clip! Head up to the top right and in the “Metrics” panel, under “Content Overflow,” make sure it is set to “hidden.” This will hide anything inside this image layer outside of the group clipping mask.
9) Try it again: Hit play… and … ta-da! It should work.
10) To export, click on “file,” then “Export as Movie” and choose “Animated Gif” or “Video.” If you’re exporting a gif, you can choose to loop and set the total time before clicking save. For a video, you can also set the length, size and quality before saving.
And that’s it!
This article is the first of a series, in which you’ll learn how to create this fully interactive, web-based graphic (below).
You’ll learn how to animate each component, add interactivity with multiple timelines, optimise it for mobile and desktop, and export the final graphic as HTML to embed it in a blog or any other website.
Stay tuned for tutorial two, where I’ll show you how to add more animated data to same graph.
