(animation below set to autoplay but can be set to hover, click-to-play and more)
(animation below set to autoplay but can be set to hover, click-to-play and more)
Seamlessly looping email icon animation. Popup notification for inbox and alerts. Customize this one or use this as a jumping off point for further customizations. Payment for this specific icon will be later when your order is ready for preview.
starting at
$25.00
(learn about the different animation formats below)
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.
Questions and projects welcome.
© JonMGomes.com
Questions?
I’m Here To Assist You
Get In Touch
Use the brief form here to submit any questions and Jon will get back to you as soon as possible!
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.