SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
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...
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
[…] Sourced through Scoop.it from: visme.co/blog […]
Gracias por el post-tutorial. Muy claro y concreto. Anima a probar.
Thanks, Jose! Glad you found it useful.
[…] 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. […]
Hi … can you share a link to the final animated infographic? And/or share some links to examples of animated infographics. Thx in adv.
Hi Kim. Here is the link to the final infographic (only the top half has been animated for the purposes of this tutorial): https://my.visme.co/projects/blog-tutorial-5-2
Here is another example of one with interactive and animated charts: https://my.visme.co/projects/ep8ne1dv-blog-post-interactive-report
Hope this helps!
[…] 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 […]
[…] RELATED: How to Create an Animated Infographic with Visme […]
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
Hi Janos, thanks for the kind words! Glad you found it useful. The tool I use to create these tutorial animations is called Screencastomatic. You can download the free version here: https://screencast-o-matic.com/home, but if you want to eliminate the watermark, you’ll have to upgrade to Pro, which is still very affordable.
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!
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.
Did this ever come to fruition?
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.
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?
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.