X
Think Differently. Think Visually. Receive weekly expert tips on becoming a better visual
commmunicator, right in your inbox.


Please leave this field empty.

We’re stingy and don’t share emails with anyone.
Nayomi Chibana

Written by: Nayomi Chibana

February 17, 2016

How to Make an Animated Infographic With Visme

header1

Looking for a way to distinguish your infographic from the millions of others floating around on the Internet? Adding animation and interactivity to your infographic is the perfect way to not only engage your target audience, but quickly catch their attention right from the outset.

Most DIY 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, if you choose, animated ones with interactive elements that take viewers to other Web pages, allow them to complete quizzes and surveys or even watch videos within the infographic.

In this brief tutorial, we teach you how to easily create an animated infographic with Visme that is sure to impress your audience.

Here we go…

1 Create a new project.

ppt steppp 6

First things first. Easily create a Visme account by going to www.visme.co and clicking the “Get Started Now” button. Just enter your email, name and password and you’re good to go. Then, click on the “Create New Visme” button on the top left corner and name your project.

2 Choose a template.

choose template

Next, select the Infographics options to view all the available, ready-to-use templates or create an infographic from scratch. In this case, we chose a friendly, eye-catching template on the benefits of blogging.

3 Insert your own text.

ezgif.com-video-to-gif

Once you’ve chosen the ideal template for your content needs and design preferences, you can insert your own text by simply clicking on the text boxes and typing in the words.

4 Animate objects in header.

Insert animation 1

You can start animating the objects in your header by simply clicking on the text box or icon, clicking on the “Animate This Object” option from the top bar and choosing one of the six different animation effects from the drop-down menu.

For our infographic, we decided to use the “Fly From Top” effect for the headline and introductory text. Next, in the same drop-down menu, we set it to enter the stage at 1 second and clicked “Ok.” Then, we applied the “Pop Out” effect for each of the icons below the text and set them to appear at 2 seconds.

Easily control the times your objects appear on stage by clicking the “Objects” option on the top bar 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.

5 Animate objects in body.

ezgif.com-video-to-gif (1)

Next, we applied the same “Fly From Top” effect to the subheaders in the sections below, as well as the “Pop Out” effect for some of the titles.

Experiment with different time intervals between one effect and the next. See them in action by clicking on the “Preview” button on the top bar.

6 Insert a color-changing animation.

color change animation

One easy trick for adding an animation to change the color of the background is to click the background shape, duplicate it by pressing the “Copy” button on the pop-out menu and changing it to a different color. You can then press the “Layers” button to place it behind the text and icons.

Next, animate this object by applying the “Fade Out” effect from the “Exit Stage” options. Hit “Preview”, and you’ll see how the color gradually transforms into the final hue.

7 Insert an opening-curtain effect.

curtain effect

You can also add a sort of opening-curtain effect by clicking the “Shapes” icon on the left toolbar, clicking on the “Shapes” category and inserting a square. Resize it to cover the entire length of the infographic and change its color to black or any other color you desire.

You can add a bit of transparency by clicking on the “Effects” option from the pop-out menu and reducing the opacity. Next, choose the “Fly to Left” animation effect from the “Exit Stage” options and set it to occur at 0 seconds. Click on “Preview,” and you’ll see how this simulates a curtain opening before the headline and introduction pop out on stage.

8 Add interactive quizzes and surveys.

insert iframe

Finally, you can add interactive quizzes or surveys created with any third-party tool by simply clicking on the iframe icon on the left toolbar and inserting the embed code.

9 Add videos.

insert video

Also, you can insert videos into your infographic by clicking on the video icon on the left toolbar and inserting the video’s URL. Then, resize and reposition as needed.

10 Make any icon interactive.

insert hyperlink

Make any of the objects or elements in your infographic interactive by clicking on them, selecting the “Link” option from the pop-out menu and inserting the URL of the page or site you want to take your visitors to.

For example, in our infographic, we linked each of the social media icons at the bottom to their respective pages.

And here is what the infographic looks like in Preview mode:

final animation

What about your animated infographic? We would love to hear about your experience creating your first animated infographic with Visme. Or if you have any questions on how to replicate a certain effect, don’t hesitate to drop us a line in the comments section below.

90% of all information transmitted to our brains is visual.
People remember...
Become a more effective visual communicator. With Visme, you can create, share or download your visuals with no design training. It's free! Take a tour.

Warning: Invalid argument supplied for foreach() in /home/vismeco/public_html/blog/wp-content/themes/blog/single.php on line 644



We’re stingy and don’t share emails with anyone.

About the Author

Nayomi Chibana is a journalist and writer for Visme’s Visual Learning Center. Besides researching trends in visual communication and next-generation storytelling, she’s passionate about data-driven content.

14 responses to “How to Make an Animated Infographic With Visme”

  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

    • Hi Steve, thanks for your feedback. In response to several user requests with this very same observation, we’re in the middle of developing scroll-activated animation effects which will come out in the next few months, this coming fall.

Leave a 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.