Below you will find some examples of animated infographics, dynamic flowcharts and more.
Learn about popular formats, helpful for figuring out final animation format. Whether for a website, social media or advertising campaigns, infographic animations can go a long way in conveying a message…fast.
Below, find a few recent animtaed flowcharts and infographics. Elements include; background music, various design schemes and optional narration.
(includes narration)
(brief intro from larger project)
(includes background music)
(animated dashboard)
The term flowchart and infographic are interchanged quite often. The point of any flowchart or infographic, also called a process chart or diagram, is to highlight the relationship between multiple points. Quite often, a flowchart depicts a hierarchy, starting with the first node or point before proceeding on to the next stage or process.
A few of the examples above include a voice over track, as well as background music. Including audio tracks and narration to the animated infographics is a great way to keep the information flowing and engage the viewer. Every viewer will retain information slightly differently so if you are able to provide a mix of multimedia to the viewer, this will help in expediting the important points within your animated presentations.
Here’s an example of a flowchart that was created for a financial consulting firm. The creation process starts in Adobe Illustrator for the design and layout and then proceeds to Adobe After Effects, for the animation side of things.
Exported HD video infographics can then be embedded to any presentation, website or social sharing platform. Read more at the bottom of this page for the specific steps that Jon goes through, and key considerations, when designing and animating a flowchart infographic.
A key consideration when creating, or animating, any kind of infographic or flowchart is the initial design. Does the overall infographic flow vertically or horizontally? The design will essentially dictate the direction of the animation.
There are a number of infographic and flowchart software available on the market but how should you choose? If you’re thinking about animating your flowchart at a later stage, it’s best to have the format in a vector format (.AI or .EPS). This way the individual components can be broken apart and the animation timing can be customized.
Flowchart layouts and infographics can be laid out in something such as Google Slides, Microsoft Word or anything else that has shape-building capabilities. These are great for quickly depicting the structure of the diagram but the core drawback is that it does not include animation capabilities.
Microsoft Powerpoint and other popular presentation software also have shape-building tools (arrows, lines and more).
If you’re using Powerpoint, I typically recommend embedding your custom flowchart into the presentation slide. This opens up a lot of custom animations, transitions and more. This also allows you to project your video on to a larger screen for any type of pitch or video conference.
Here’s a timeline of the design to animation process and a brief explanation of each stage below.
step #1
During this stage it’s important to note where your final animation will go and what the total duration will be. Are you pairing the animation with any content on a website? If so, does the animation need text or a call-to-action at the end?
If you are thinking of sharing this animated infographic on social media, it’s helpful to have some kind of logo animation for branding purposes. With so much content online these days it’s easy to get swept into the content tide without making an impression on a consumer.
Depending on whether you want a looping icon animation, it might be beneficial to check out a Lottie style format for dynamic infographics.
On a desktop?
Click on the gear icon here to start the animation. User-interaction based animations (in JSON format) are ideal for fast load times and simple/minimal designs. Some developmental knowledge is required to install this format.
(click to play)
step #2
Colors, brand fonts and more are decided here. If you already have a color palette or brand-specs PDF, it’s easy to pull all the necessary information from there.
The big thing here will be getting the proper color codes, hex format preferred.
step #3
If you already have a designer that is great and will certainly save on $$.
In order to animate a proper infographic or flowchart, it’s important to split each component of the vector design into a separate layer. This allows for more control over the final animation process (also allows for more creativity).
step #3.5
If you are considering using a narration or specific voice overs for your animated infographics, it’s important to have the final file here before we start animating.
This is going to save a lot of time and $$ in revisions later and it’s beneficial to create the animations for the specific narration (and not vice-versa).
step #4
Assuming all designs and narration files are ready, let’s upload them to Adobe After Effects and start the animation process.
Nothing overly-fancy about this step.
step #5.
This is where each animation keystroke, color burst and transition are created (all based on the design from the previous stage).
This is also where some creative freedom (brand-specific) can be created based off the design. For example, rearranging some of the design elements and creating entrance animations for some of the components can really go a long way.
Revisions are also included in this stage.
step #6
Congrats!
The animation and flowchart infographic are set. Now, if applicable, we can add in some light background music to enhance the overall ‘vibe’ of the animation.
Background music is different than narration as the animations don’t always rely as heavily on the timing of the music.
A recommendation here might be some royalty free background tracks, found by clicking the button below.
Other infographic topics and examples:
Infographic design is a great way to take complex information and present it in a way that is easy
Animated Infographics and Flowcharts Below you will find some examples of animated infographics, dynamic flowcharts and more. Learn about popular
Dashboard animations are a great way to add interest and engagement to your data. They can be used to highlight
Animated sales reports are a great way to improve the visibility and understanding of your sales data. By animating your
Whether you’re creating an infographic for your next Powerpoint presentation, website or social media – consider using a 5-step process
A process chart is a diagram that illustrates the steps of a process. It can be used to document a
Learn below about continuous line drawn animations. These can be great for infographics, powerpoint presentations and icon imagery. Browse examples
Timeline animations are a great way to show the passage of time and the order of events. They can be
A map GIF of the United States can showcase data growth over a period of time, population movement and
Questions and projects welcome.
© JonMGomes.com
Get In Touch
Questions and Conversations
Submit Your Project Info
Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.
About Animation Formats
Transparent backgrounds can appear on most animated formats, except for GIF (they become pixelated and look terrible). The majority of times when you see an animation with a transparent background on a website it is actually a Lottie animation. If you see a transparent animation on a video file, it is most likely a .mov video with ‘alpha layer transparency’ that is merged on top of the original footage (see an example in the 4 Popular Animation Formats explained below).
It’s always best to start with the end goal in mind, where the animation will be placed and then choose the format needed for that platform or software. Glad to help, just get in touch using one of the contact form buttons.
Learn about the four popular animation formats, these make up about 99% of any animated content that you come across.
Learn about the four popular animation formats, these make up about 99% of any animated content that you come across.
One of the most popular video formats. Almost all of the videos you might see on social media, LinkedIn, websites or elsewhere use this standard format.
Supports HD video resolution but not full background transparency. If you are considering an animation for a website section, the video background can be created to match the section so it appears to fit in seamlessly.
There are multiple formats of .mov but if you are looking for a video with full background transparency you will want a .mov file with ‘alpha layer transparency.’ Typically this file format is used for overlaying one video animation on top of another.
Supports full background transparency and HD video for crisp animations. If you choose a .mov with transparent background you will need to have some video editing knowledge on how to embed.
The great thing about GIFs is that they autoplay without any need for developmental knowledge or background. GIFs also loop automatically, so it’s best for any type of GIF creation that the first frame (start) of the animation matches the end frame exactly.
This way GIFs won’t appear to have any ‘skip’ that is commonly associated with them. The drawback of GIFs is that they do not support transparent backgrounds. Also, due to being a self-contained animation format, more complex animations can create large file sizes.
Fully supports transparent backgrounds and are great for animated icons on a website or app. Lottie utilizes scaleable vector graphics (SVGs) for creation. Their fast load time allows for a much more compressed animation than GIF if page load time is important.
The only drawback for Lottie is that it requires a certain amount of developmental knowledge to install on the webpage or app (Lottie format comes in a .JSON txt file that looks like a bunch of robot code).
Lottie also allows for user-interactions on a website, hover-over effects and autoloop are just two of them.