How to Create Animated Infographics With Visme [Step-By-Step Guide]

Written by:
Chloe West

create animated infographics - header

Infographics can be seen all over the web, whether they’re inside of blog posts, on social media or even in email newsletters.

While infographics are definitely a successful tool for many things, from marketing to link building, you still want to make sure your infographics stand out. And a great way to do that is to create animated infographics.

Adding elements like animation and interactivity to your infographic is the perfect way to not only engage your target audience, but quickly grab their attention right off the bat.

Most infographic tools make it easy to create your own stunning visuals within minutes, but few provide the means to add animation and interactivity. 

With Visme, you can do both – create beautiful static infographics or animated infographics with animated illustrations and interactive elements like links, quizzes, surveys or even videos embedded right within the infographic.

In this quick step-by-step, we’ll show you how to easily create animated infographics with Visme that your audience is sure to love.

You can also check out our quick, 5-minute tutorial video on creating infographics in Visme before reading on to learn more about our animated features.

 

1 Create a new project.

create animated infographics - create a new project

First things first. Create your very own Visme account for free. Just enter your email, name and password and you're good to go. 

Once you’ve logged into the Visme dashboard, click on the Create button at the top of your left sidebar.

 

2 Choose a template.

create animated infographics - choose a template
Find the perfect template for your next animated infographic!Browse Now

Once you click Create, you’ll be able to view all of Visme’s thousands of template options. Our Visme Unleashed update provides even more ease for navigating through to find the exact template you need.

You can scroll through the Infographics tab, click the search bar to find various infographic categories or type in your search query to find relevant templates.

You also have the option to start with a blank canvas if you want to create a new design completely from scratch. The world is at your fingertips to do with what you will!

For the purposes of this tutorial, we’re going to use the 5-step animated infographic template on How to Wash Your Hands.

 

3 Insert your own text.

Every one of our professionally designed templates are fully customizable, so you can change each bit of text, photo, chart, etc., to fit your content, rather than the placeholder content many of our templates include.

We’re going to update the text in our infographic to say “5 Types of Animation to Use In Visme.” Be sure to update text size accordingly so your design still looks perfect.

create animated infographics - insert your own text
Customize this infographic template and make it your own!Edit and Download

4 Add animated graphics.

Visme offers different types of animated graphics to add into your design to create an animated infographic. 

animated graphics - animated illustrations and elements

You can use illustrations (choose from three different styles – flat, outline and isometric), characters (choose from a variety of poses), gestures, special effects and more.

create animated infographics - add animated graphics
Find the perfect template for your next animated infographic!Browse Now

Every aspect of these graphics is completely customizable from the smallest detail to the skin color of your chosen character.

You can add these as visual elements within your infographic to help represent your point and choose how many times the animation repeats as well as how quickly it runs.

create animated infographics - add animated graphics

Each of Visme’s animated graphics is completely exclusive to our platform and has been custom designed by our in-house team of designers.

 

5 Create animated enter and exit effects.

Whether you’re creating a presentation, social media graphic or animated infographic, you’ll want to animate various elements of your design, like text boxes and icons that aren’t pre-animated.

Visme makes it easy by giving you access to 14 different types of enter and exit effects.

creative animations in visme

Just click on the object that you want to animate, click Actions, then Animate to view your options. Choose an enter animation type for elements that you want to stay on the page and an exit animation type for objects that you don’t mind flying off the canvas.

create animated infographics - add animated effects

You can preview your design to see what the animation effects will look like.

create animated infographics - add enter and exit effects

Easily control the times your objects appear on stage by clicking the hamburger menu in the top left corner and selecting Show objects list to view the timeline.

Here, you can see at what time each element appears relative to others and you can easily move them to appear earlier or later. Keep in mind that the objects list only shows your selected content block’s objects, not the full infographic.

 

6 Add animated charts and graphs.

Need to showcase data and statistics in your animated infographic? Visme’s charts, graphs and data widgets come with automatic animations built in to make sure your numbers pop out at your audience.

create animated infographics - add animated charts

There are a few different animation types to choose from for your charts so that you can find the most seamless animation to fit right into your project.

create animated infographics - add animated charts

If your infographic is filled with charts and graphs to showcase tons of valuable information, be sure to keep a similar animation type throughout so the design is cohesive.

You can also have your chart values appear as users hover over your different bars, lines or pie pieces to add interactivity into your data visualizations.

turn boring numbers into beautiful data with visme

 

7 Create pop-ups.

You can create interactive elements within your infographic by linking various objects together and creating pop-up or hover effects.

It’s so easy to do, and this will help you create interactive quizzes or Q&As within your infographics as well as high-quality designs like this grading diagram we created ranking top design tools.

To link elements within your infographic, click on the object you want to be clicked on or hovered over to make a second object appear.

Then click the Actions menu, click Link and then click the Pop-up option. You can then choose which object will appear when a user clicks on or hovers over your selected element.

create animated infographics - create pop ups
Find the perfect template for your next animated infographic!Browse Now

Keep in mind that the objects receive generic names automatically when added into your infographic. 

By going to the hamburger menu in the top left corner and clicking Show objects list, you’re able to see these names as well as rename them so that you choose the correct linked object.

create animated infographics - add pop ups

This type of animation and interactivity within your infographics can completely set your designs apart from a typical static infographic. Play around with all of the different ways you could create pop-up effects in your next infographic.

 

8 Embed videos.

Another great way to add elements of animation and interactivity to your infographic is by embedding a video by using the Media or Apps tabs in the left sidebar in the editor.

create animated infographics - embed video

The Media tab allows you to embed any type of online content as long as you have a URL or iframe code. Enterprise accounts even get access to embed HTML codes within their Vismes.

Furthermore, clicking Videos will let you browse through our library of stock videos to add to your infographic background or as an accent in your design.

The Apps tab allows you to link to various video apps (and more coming soon!) so you can just paste in a YouTube or Vimeo app right into your Visme.

 

9 Add links.

Aside from linking objects to create pop-ups, you can also link out to external sites or even create links between blocks within your infographic. This is especially useful if you have a longer infographic with a lot of information.

Click on the object you want to link (like a social icon in your infographic’s footer), go to the Actions menu, click Link and then add your link in the Web tab.

create animated infographics - add links

As you can see, we linked to our home page in the footer of this infographic. You can choose whether or not you want your link to open in the same window or a new window as well, just like in regular blog posts and webpages.

 

10 Customize your fonts and colors.

Before finalizing your design, make sure you customize the fonts and colors (if you choose) to match your brand, your content or just your favorite colors.

create animated infographics - customize fonts and colors
Find the perfect template for your next animated infographic!Browse Now

Visme has hundreds of popular, free fonts to choose from as well as premade color themes that allow you to change the overall look and feel of your infographic with a single click. A Visme Brand Kit allows you to add in your own color themes as well.

 

11 Share with your audience.

Finally it’s time to share your new, animated masterpiece! The best way to do this and ensure that all of your animation and interactivity remains accessible is by embedding your infographic onto a blog post or webpage.

You can see how we embedded our design tools grading diagram in this blog post here to get an idea of what this will look like.

And you can also check out all of the animation and interactivity elements we added to the infographic we created throughout this blog post:

Visme also allows users to generate a public or private link to share their projects online, as well as download in a number of formats. Infographics can be downloaded as a PDF, JPG, PNG or HTML5.

HTML5 is an offline file format that still retains all of the animation and interactivity elements you built in the Visme editor and can be a useful option for many users.

 

Create Animated Infographics With Visme Today

Ready to get started creating your own animated infographics with Visme? Sign up for a free account to start playing with all of the design elements available to you and create your own animated masterpiece.

SPEAK LOUDLY. SPEAK VISUALLY.

65% of the population are visual learners

Create, share and download beautiful visuals with the world’s most versatile and powerful visual communication tool.

Create Your Design. Sign Up Free
 
We’re stingy and don’t share emails with anyone.

About the Author

Chloe West is the content marketing manager at Visme. Her experience in digital marketing includes everything from social media, blogging, email marketing to graphic design, strategy creation and implementation, and more. During her spare time, she enjoys exploring her home city of Charleston with her son.

19 responses to “How to Create Animated Infographics With Visme [Step-By-Step Guide]”

  1. Gracias por el post-tutorial. Muy claro y concreto. Anima a probar.

  2. […] With a bit of creative thinking it is easy to transform boring bullets into brilliant animated slides! Always remember to pace the information on the slide and use your audience’s attentional abilities to your advantage. For more on how to use animation in Visme check out this post on creating animated infographics. […]

  3. Hi … can you share a link to the final animated infographic? And/or share some links to examples of animated infographics. Thx in adv.

  4. […] other programs, Visme lets you create both static AND animated infographics. (Click here to learn how!) Viewers can actually interact with your infographic, taking surveys, playing games, completing […]

  5. Janos Karovits says:

    Hi Nayomi, Thanks a lot for the very informative and clear tutorial !
    Could you also tell me what is the capture tool that you are using to make these great tutorial animations (with mouse tracking ring, click animation, zoom, screen area highlight/dim) ?
    I already searched the web for days and even asked Visme support, but none of these provided useful info.
    Your help would be much appreciated ! Thanks !
    Janos

  6. Hi Nayomi
    I love the idea of interactive infographics, but I have one question before I dig deep and make my own amazing infographic.
    I would imagine that when embedding these infographics inside articles and blogs posts and webpages, all the animations and interactive elements work perfectly…correct?
    But what about Pinterest? When these infographics make it to Pinterest, are they still interactive and animated?
    Thanks for the great tutorial!
    all the best
    Orana

    • Hi Orana. Thanks for posting your question. Yes, correct. You can embed Visme infographics on websites and blog posts and they’re fully interactive. Since Pinterest is an image-based platform, you’d have to download your project as a JPG file and upload as a static image. Anything else we can help you with, just let us know!

  7. Steve Wright says:

    Hi guys

    Premium user here. Is it possible to make animated infographics where particular elements animate when the reader scrolls to them rather than them being on a timer? It would seem like there isn’t much point in animating items lower down if someone is scrolling the infographic slowly reading the information. If this isn’t possible right now, is it something you can add to your roadmap for the future?

    Thanks
    Steve

  8. anneloes says:

    Hi! I really like this. In what format would I need to download the file in order to have an interactive/animated inforgraphic? I would like to use it in an app.

    Thanks !

    • Hi! We’re glad you found it useful. For offline use, you can download the file in HTML5 format to preserve animation and interactive features. You can also click on ‘Share’ and use the embed code or shareable link to view the infographic online.

  9. Roger Hajjar says:

    Hi there ! this sounds great. Is it possible to download the animated infographic as video file (avi or other).

    I am assuming here that is no interactive / clickable functions included but mainly animations?

    • Mahnoor Sheikh Mahnoor Sheikh says:

      Hi Roger! Thank you, I’m glad you found this helpful.

      You can download animated infographics for offline use in the HTML5 format. This will preserve both animated and interactive features. You can also share them online using a link or embed them using a responsive code.

Leave a Reply to How to Create an Animated Presentation | Visual Learning Center by Visme Cancel reply

Your email address will not be published. Required fields are marked *

Create Stunning Infographics

Want to set yourself apart from the rest? Start creating stunning infographics within minutes with our easy drag-and-drop software. Access 100+ beautiful templates, 100+ free fonts and millions of images and icons right now.

Now Available: Become a Certified Presentation Expert for FreeTake the Course
Now Available: Become a Certified Presentation Expert for FreeTake the Course