Forem: SVGator

Landing page examples and best practices: a must-follow guide to convert

SVGator — Wed, 11 May 2022 08:26:03 +0000

A clever landing page design is more than delightful visuals and persuasive copy; it’s a crucial tool that will determine the success of a marketer's efforts.Today we’re going to share with you our landing page best practices, along with many examples that will help you find inspiration and highlight the value that will turn visitors into leads.

What is a landing page?

A landing page is a web page with a specific purpose: it could be a stand-alone dedicated page that you are taken to when you click a Call to Action button, a social media link on an ad, or the homepage of a website. It is essential because it is the face of your business, the welcome at your door, the first impression that counts the most. Unlike other web pages, which have multiple goals, a landing page has only one goal and one call to action.

This page provides a brilliant opportunity to hold your visitors, catch their eye, inform them, and persuade them to choose your products or services. It gives you great control over your conversion process, it is the best option for your go-to marketing strategy, and it can significantly lower your costs to acquire a lead or sales.

What makes a good landing page design?

Building a landing page might seem easy, but there are a lot of things you have to keep in mind in order to provide the best user experience possible. Whether you’re creating it from scratch or using Squarespace landing page builder, it should be able to convey a clear, valuable message and give a strong offer.

High converting landing pages have one thing in common: they all identify exactly what the product or service offers, without any distracting elements. In order to achieve this, you will need not only thorough research, a killer headline, and a persuasive copy, but also a design that will make the visitors stop to look along with engaging visual elements that will make them stay.

As visual content is an essential part of the landing page, in this article we will focus on presenting landing page best practices from a design perspective. From our point of view, the recipe for success contains a pinch of interactivity and a series of engaging landing page animations that help to maximize visitor retention.

Web animation has become an essential part of landing page design, whether it’s used for microinteractions or stunning animated illustrations. As the human brain processes images 60,000 times faster than text, your visuals will shape the visitor’s impression even before reading a single line of text. Needless to say, animated visuals will do the best job in drawing the eye to your CTA and engaging your audience in a fun and creative way. Now let’s have a look at our tips to bring your landing page to the next level.

Landing page best practices

1. Keep it simple

Finding the healthy balance between showing and telling can be a real challenge, but a landing page is all about simplicity and clear CTA. Animation offers a great opportunity to present more ideas in less space without killing the UX.

Handwriting effects, self-drawing lines, and animated text are attention-grabbing elements that will emphasize your ideas and give users the desire to stay longer on your page to read the whole sentence, or perhaps to scroll down and continue their journey.

2. Add dynamics to improve navigation

Create a prettier look with stunning animations that will load as the visitor scrolls through the page. The motions can be subtle or more noticeable, but they shouldn’t affect the loading time — this is why we always recommend that you use lightweight SVG animations instead of GIFs.

Check one of our best landing page examples below, which presents the mobile app animations. Here we used several types of animations with different goals: on the first fold, we show the results you can achieve by using the tool, then we emphasize g how amazing interactive app animations are. These are followed by a fun animated character to entertain visitors, but the example also supports the idea of having advanced tools. Finally, you have a live demo showing the tools asset library.

3. Tell a story

Never underestimate your power as a graphic designer to tell a great story. You can create emotional connection with clever interactive elements, cool demos, cute characters, and other strategic elements that are in line with the brand’s personality and tone of voice.

Copywriters have a limited space to clearly state a web value proposition in a few paragraphs, so design helps a lot when it comes to giving life to content. By setting up a visual hierarchy of elements, you can effectively influence the viewer’s perception of ideas and convert them as part of the story.

4. Optimize your SVG

A simple yet powerful landing page cannot exist without lightweight and crystal-clear visuals that won’t affect load times. Achieving this with SVG can be a piece of cake, as SVG animations are quite small in comparison to gifs or videos. However, when you have a lot of them, you will still need to do some optimization work in order to get the best possible load times.

Depending on the complexity of your animations, your code might require the browser to do more work before it can display the first-page render. Fortunately, there is a workaround to optimize your cool landing page animations so that they won’t cause any problem in terms of page speed and user experience. If you want to learn more about SVG optimizations, check out this dedicated article that will explain everything you need to know about it.

5. Show a demo

Besides telling a story, you should also demonstrate value: whether the page is offering a product or a service, users would be glad to see them in action in a real-life context.

The smartest way to do this is to add an explainer animation, a demo video, or a step-by-step guide to your hero section and place a CTA button below it.

As far as visuals are concerned, abstract concepts and less tangible topics offer more room for creative solutions For example, we used this animated astronaut floating in space on our homepage to represent our key values and mission: a revolutionary new way to animate characters and other illustrations with a few clicks. We chose this form of presentation instead of a generic demo in order to grab the viewer’s attention and demonstrate the results they can achieve by using our tool. Of course, showing people how your product works is always a good idea, so we also had a video presenting SVGator in action before changing it to the astronaut.

6. Conceal load times with fun

Nobody likes to wait, right? Although we try our best to have a fast loading and high converting landing page, there still might be some cases when waiting is inevitable. The good news is there is a solution for this, too: you can easily turn inevitable wait times into an entertaining and pleasant experience with animated preloaders. This interface element not only improves the overall user experience, but also prevents users from bouncing. With SVGator’s new API, you can programmatically control your preloader so that it will show the real-time loading process of your page.

7. Use animated icons

Conversion rates can be improved by even the tiniest details, like those aesthetically pleasing icons that are indispensable assets on a high converting landing page. Bring essential content to the forefront, attract attention to key elements, and save screen estate with clever animated icons. You can also make them interactive with hover effects or on-click/on-tap triggers.

8. Use white space

Strategic space placement has a cardinal role in creating a visual hierarchy of design elements, and it’s a true booster when it comes to user-friendliness. It improves readability by dividing and grouping ideas in separate sections, and it is especially useful on conversion-centered pages because it allows content to make more impact.

If your design element has more space around it, viewers are more likely to look at that one first. This is why we advise you to use plenty of macro white space at the first headline and CTA button at the top of your page, then smooth transitions between sections, ideas, and step-by-step process descriptions with macro white space.

9. Use contrasting colors

The design principle of contrasting colors applies to high-converting landing pages as well. Here we’re not talking about CTA button colors or testing different hues, and we’re not getting into “color psychology” that may or may not work. Marketers stuck to these ideas for a long time, but today we know that there is no one color or hue that can guarantee conversion.

We’re simply emphasizing the fact that choosing the right contrasting colors and being consistent with your design element may be the key to a successful landing page design.

Web animation has become an essential part of landing page design, whether it’s used for microinteractions or stunning animated illustrations.

10. Limit exit opportunities and distractions

Your page has a single conversion goal, and you want your visitors to be focused only on one action. That is why it is essential to avoid adding any internal or external links and not to mention other features or offers. You can also remove the navigation bar and exclude social buttons, or place them below the fold.

Your cool landing page animations are no exception to this, so make sure that they guide your visitors through the page and do not distract them from filling out the form, signing up or hitting the CTA button. You may also add an exit intent pop-up that offers another reason to stay on the page: this can be a compelling offer or related content that will make them change their mind.

Landing page examples we like

Now that you’ve learned about landing page best practices, let’s find some inspiration for your next project. We’ve put together this list of landing page examples to help.

Express VPN

Slack

We use Slack for daily communication, so it’s no surprise that we are quite familiar with its website. It’s not only a cool app, but it also serves as a great landing page example. Using trust value symbols right at the top of the page is a brilliant idea; we also love the dashboard screenshot, the nice demo video, and the cool landing page animations!

Stripe

Stripe is a genius not only at financial services but also at landing page design. The animated gradients were a risky choice, but they still perform well and give the page a special look. If you want to learn more about animating gradients, check out this article on color banding. The only thing we’ve done differently: the CTA could have been a bit larger.

Shopify

This landing page design clearly follows the rule of keeping it simple. Adding a bit of motion to the simple graphics might have been a good idea here, but the clear interface and the concise CTA are doing a great job at attracting new customers to start their free trial. This hue of green inspires feelings of safety, harmony and growth.

Mailchimp

Wow, look at that sunny yellow! Mailchimp’s official brand color also looks nice on the background, and it’s definitely an eyecatcher. The hero image is also funny and impossible to ignore. We love that each visual loads on scroll into view, adding dynamics to the page.

Hopper

This popular travel app has an amazing animated background illustration, lovely colors, cute icons, and nice font. The CTA immediately sends you to the app download page, which also has a really cool design!

Absurd

This simple yet powerful black and white design gives you an idea of what kind of vector artworks you can find here if you become a member. The playful, surrealistic illustrations are amazing, unique, and truly creative! You can also preview design packs before committing to subscribe.

Orangina

This one is full of landing page animations, wherever you move the cursor! It is quite the opposite of Absurd; it has a vibrant, playful, and really colorful product landing page that represents the brand’s personality. However, due to many distracting factors, it may be a bit hard to navigate, and the CTAs are not so clear at first sight.

Codecards

Darkmode never seems to go out of style, and it’s one of our personal favorites. This page helps developers to easily learn new coding concepts in a fun way. The visuals are on point by showing the actual play cards, the copy is clear and concise, and the CTA button is just so cool!

SVGator

Contrasting colors, darkmode, a set of colorful animated icons and interactive elements make this landing page really effective and appealing. We tried to demonstrate the versatile nature of animated icons and add visuals that load on hover, so that viewers can have a bit of fun.

If you’d like to share with us your cool landing page animations, don’t hesitate to contact us at contact@svgator.com or via Facebook, Twitter or Instagram.

Color Banding in Gradient Animation: 10 Quick Fixes

SVGator — Thu, 14 Apr 2022 10:20:33 +0000

Troubleshooting color banding is definitely one of the top five situations where a designer/animator is most likely to blow a fuse. If you’ve ever had to find ways to avoid banding in gradients, then you know the struggle! This is why we’re outlining 10 quick fixes you can implement, and letting the cat out of the bag on the ultimate switch for a workflow that doesn’t require workarounds for smooth, banding-free gradients.

Finding the ideal countermeasure for a heavily banded gradient in a still image is an ordeal on its own, but throw animation into the mix, and you’re in for a rough ride. Banding is a visual artifact that most raster file formats (PNG, GIF, mp4, etc.) are prone to. We’re obviously partial to the SVG format, but we’ve been around the block long enough to still have plenty of firsthand experience with addressing banding issues in animated color transitions on the web.

It’s worth noting that no matter what file format you’re working with, banding remains heavily reliant on the resolution, color profile, and general display specifications of the devices your animations are looping on. This means the same gradient banding can be more or less noticeable on different screens. So, keep in mind: the goal is to tackle only the matters that we can control!

What Is Color Banding?

Color banding is an imperfection in how color is displayed in digital graphics. Banding typically becomes extremely noticeable in gradients that use colors that are very close to each other on the color wheel. When the colors are too similar, there aren’t enough tones available to create smooth color transitions inside a gradient fill.

Colors themselves aren’t the main culprits. Tonal gradation (i.e., the limited number of increments between light to dark tones you have available) is to blame for the dreaded color banding in an animated gradient. Even subtle gradient banding can ruin an animation, mainly because once you see it, you can’t unsee it. And no designer wants to see a flaw in their design on an infinite loop!

Luckily, or maybe, unfortunately, we’ve all been in the same boat at one point or another – so there are a number of tried and true workarounds that you can test out. The bad news is that there is no “one size fits all” solution to color banding, which means your gradient banding context might require one or more steps to completely resolve the issue.

What Causes Color Banding in Motion Graphics?

Before we get into the most efficient workarounds that will help you fix color banding, we need to expose the main culprit behind most of the pesky gradient banding issues – and that is compression. Exporting motion graphics as raster files (GIF, APNG, video, etc.) comes with a loss of fine details and imposes limits on the number of colors that get displayed.

Even lossless compression can absolutely ruin an apparently smooth gradient. GIF is particularly prone to color banding because it’s limited to a 256-color palette. By default, exporting an animation as a GIF will limit the number of tones the file has available to display your gradient – resulting in heavy color banding most times.

Why 256 colors, exactly? Going into bit-depth territory, 256 is the number of colors an 8-bit fully-programmable palette can support. 8 bpc is a default project composition depth setting, but motion designers can switch to 16bpc or 32bpc depending on the specifics of the project they’re working on.

We rely on compression in part to create performance-friendly files that won’t max out bandwidth or take ages to load on a website or in a mobile app. Clearly, the benefits far outweigh the loss of fine details, but this doesn’t make color banding any less frustrating.

A universal fix is out of the question when it comes to color banding in gradients, simply because there are too many variables at play. Even so, there is a “first instinct” approach that almost all designers/animators try their luck with. Let’s take a tiny detour to get the obvious out of the way first!

Blur Doesn't Eliminate Color Banding in an Animated Gradient

Blurring smoothes out the color transition between pixels, leveling the changes in pixel intensity. What “Blur” also does is reduce contrast, practically fanning the flames of the root problem (i.e., leaving you with even fewer tones between the endpoints of your gradient).

Adding blur to a banded gradient can actually worsen color banding, especially if you’re using color correction effects or filters in your project as well, like curves or levels. You might just end up shifting the banding pattern, and stacking multiple effects can also lead to unexpected results. Furthermore, if your color banding issues are linked to a limitation in how the graphics are displayed, blurring will not fix the problem.

10 Quick Fixes for Color Banding in Gradient Animations

Now that we’ve touched on what goes on behind the scenes of digital color banding, let’s take a look at how you can avoid, manage and/or completely eliminate gradient banding in motion graphics – including the dos and don'ts of vibrant and smooth gradient animation:

Increase Color Depth a.k.a. Bit Depth

If the design tool/program you’re working with defaults to an 8-bit color depth, the first significant step you can take to smooth out color banding is to increase the Color Depth setting. Although this default setting works perfectly fine for most projects, and does a great job of keeping file sizes reasonable, it might be interfering with your project if you’re seeing heavy gradient banding.

Color depth, a.k.a. bit depth, describes the total number of bits per channel (bpc) used to display a pixel’s color. A “bit” is a measurement unit for how much information can be stored for each of the RGB color channels. By increasing the color depth (from 8bpc to 16bpc or 32bpc) you increase the number of colors each pixel can display.

Given the fact that color banding is rooted in a limitation of the number of color tones available, increasing the number of bpc directly addresses one of the core issues that prevent the output of smooth color transitions.

Add Noise

Noise will help smooth the harsh edges of color banding by substituting the tones your design is lacking with tiny dots. These little “bridges” won’t bring new tones into the picture, so the colors of the dots will fall somewhere within the range of colors that your gradient animation already has available.

You can try this quick fix on its own, or you can give this optical trick the best chances of successfully eliminating color banding by increasing your project’s bit depth first. Another key adjustment that you’ll have to consider when adopting this technique is to figure out how much, or better yet, how little noise to use before you’re happy with the smoothness of your animated gradient.

The easiest way to fix color banding with noise is to start off with 1% and adjust progressively until the issue is almost completely resolved. The line between solving the banding problem and creating a new problem can be relatively thin.

Tap Into Default Dithering

Dithering, in digital graphics, approximates the tones that are missing in a limited color palette and diffuses them between pixels, adding noise in the process. It’s basically an automatic way to add low levels of noise. Your design program of choice will dither your gradient animation when switching to a lower bit depth. This means you would create your project using a 16 bpc setting, and then switch to 8 bpc when exporting in order to mask slight banding.

Now, this might sound contradictory to the first two fixes above, but it works like a charm for subtle gradients and light color banding. It also takes tinkering with noise percentages out of the equation completely.

Add Grain

Adding grain to your animated gradient works very similarly to adding noise. The percentage of grain you use to conceal a dreadful degree of color banding should be minimal. Choosing between noise and grain is mostly a question of preference, but the goal is the same: to fill in the gaps in color tones and create the illusion of a smooth(er) gradient.

Limit Gradient Fills to Smaller Areas

Let’s put things into a more practical perspective! A standard 15-inch laptop monitor has approximately 1440 pixels – for a green gradient background, a GIF file’s 256 shades of green couldn't display a smooth green gradient without banding. Simple math would dictate that you’d have a band of color every 5.6 pixels (1440 ÷ 256). A dark green gradient would leave you with maybe 6 out of those 256 shades of color, intensifying the banding.

It’s significantly more difficult to disguise banding in large gradient fills even with noise/dithering. If your project allows for this creative freedom, limiting your gradients to smaller areas will by default prevent severe cases of gradient banding.

Get Out of the Dark Side

The laptop monitor example in the quick-fix listed above makes a good point of how the number of color tones available drops drastically when you enter the realm of pitch dark gradients. Brighter gradients have the advantage of being able to trick the human perception – the difference between two bright tones are relatively imperceptible compared to the absolute difference between two darker shades.

Fixing color banding on brighter gradients using dithering, for example, is easier as well. You have better chances of making the transitions between colors fuzzier and achieving a smoother blended look when working with brighter gradients.

Cut Down on Movement

Compression is a triple threat for raster motion graphics! During compression, an encoder (the program responsible for optimization) will prioritize the information transmitted by the bits that are moving.

The bitrate of a video is like an upper limit on quality that also limits file size. If you have one or a few main subjects moving on a mostly static background, most of the available bits will focus on the animated parts, while the background pixels can be stored and reused. Chances are that the result will look good and have a small file size as well. Add in some dense snowfall, a moving grid in the background, or a huge gradient animation, and the available bits won’t be able to handle all the extra information. Blurry graphics, compression artifacts and significant banding are all likely to make an appearance in your final video. The more movement you have, and the lower your bitrate, the worse these compression side-effects will look.

In GIF animation, where there is no compression happening, the more pixels that change in between frames, the greater the file size will be.

Inter-frame compression has its merits, keeping raster file sizes manageable, but it’s not friendly toward heaps of fast-moving details.

Add More Color Stops

Introducing one or more additional color stops between your gradient’s endpoints will add to the number of tones that will make up the smooth tonal gradation you’re aiming for. This quick fix gets extra brownie points for also making gradients look more intense by getting rid of any dullness or muddy in-between tones.

Get Rid of Zero Factor Percentages

Having one of your gradient’s endpoints set to “pure white” (#FFFFFF or rgb(255,255,255)) can cause a less problematic case of color banding, where you get a white cutoff band near the outer boundaries of your gradient. There’s an easy way around this less noticeable pitfall, and that is getting into the habit of working with off-whites. These hues can be ivory (#FFFFF0), whitesmoke (#F5F5F5), floral white (#FAF9F6), or snow (#FFFAFA), among others, depending on the other undertones your tonal gradation is made up of.

Identify Technical Limitations

Switching between a monitor where color banding is a non-issue and a banding-riddled screen will make you realize you've been taking smooth gradients for granted all along! The possibility that the end-viewer of your motion graphics has a lower quality, defective, or miscalibrated monitor is objectively out of your control. Other external factors, such as low bpc color resolution system settings or off video card gamma settings are also out of your hands.

All the gradient banding workarounds we’ve touched on can be overturned by technical limitations on the end-user’s side. But the biggest technical threat continues to be the postproduction compression of raster graphics – the villain of the stories you’re telling with smooth animated gradients.

Luckily, there is a graphic format that doesn’t require tricks, witchcraft, or creative sacrifices to render flawless animated gradients, and that is SVG.

SVG: The Ultimate Way Out of Color Banding Limbo

You can become an unconstrained motion graphics storyteller by switching to SVG animation – with no need to cut creative corners in order to create smooth, beautiful gradients! There’s no lossless/lossy compression to speak of when it comes to animated SVG files. And as we’ve seen, compression is the culprit behind more than half of all color banding cases. Shifting to scalable vector graphics can give you a headstart, especially when working with animated gradients.

A vector animation is essentially a set of math equations that amounts to only a handful of points, lines, and curves for any system to process, in contrast to the thousands of pixels of a raster animation (depending on resolution settings and frame-per-second rate). These performance and file size differences are relevant in the case of gradient banding because you’ll end up with an enormous bloated raster animation (GIF or APNG) trying to smooth a case of intense color banding, when you could instead get flawless color transitions at a fraction of the file size with SVG animation.

The reality is that SVG might not be a compatible substitute in all animation use cases. Animated raster graphics (APNG, GIF, video, etc.) serve multiple purposes perfectly fine. But in the context of gradient animation, there’s no better way around the constant color banding troubleshooting. SVG gradient animation has a leading edge over its raster counterparts!

Final Thoughts

Minimizing color banding in animated raster gradients is definitely possible – although the quick fixes will require you to cut your losses on file size, color sharpness, or the level of detail you can include in your animations. Switching to SVG animation makes the most sense when you’re constantly trying to find workarounds for problems that are non-issues in the SVG-sphere.

Save yourself from the annoying cycle of fixing color banding, and start creating the smoothest gradient animations with SVG here!

Have any questions? Want to leave a suggestion? Wanna chat about how awesome animating is? Let’s connect on Facebook, Instagram or Twitter!

20 Animated Logos to Spark Your Inspiration

SVGator — Tue, 12 Apr 2022 10:48:51 +0000

Motion graphics are at the peak of their popularity among marketing-savvy designers from around the world. It’s no wonder that logo animation is rapidly gaining traction among smaller brands as well. These brands are following in the footsteps of current market giants like Google, Netflix, and Linkedin.

Need some logo animation examples to get those creative juices flowing? We’ve got you covered! Skim through this list of the best animated logos out there, and you’ll see how these visuals are in fact doing more than just establishing brand identity: the best animated logos also manage to get a brand’s message across in a persuasive, engaging, and inspiring way.

Wondering if you need coding skills to be on par with the designers of these cool logo animations? No worries - we'll show you how to easily animate a logo without writing a single line of code. But first, let's get inspired!

Inspiration-sparking logo animation examples

Discord

Discord’s OG mascot logo is the iconic gaming console character named “Clyde''. With the brand shifting their focus to cater to a broader consumer base, moving away from its gaming-centric origins, Clyde has gone through some changes as well.

Designers first freed Clyde from his restrictive speech bubble and then reshaped the character to make its features easier to translate when scaled to print on merch. The animated Discord logo brings the friendlier and more playful feel of the mascot full-circle, with a wink and some fine-tuned changes in the brand’s color palette and wordmark.

Netflix

Starting off with its signature animated “N” ribbon, the Netflix logo animation then morphs into a barcode-like visual. This concept originated from the team’s initial idea of using the thumbnails of Netflix originals, seen from a sideways view.

The play on the color spectrum and the illusion of depth are the key effects behind this logo animation’s ability to draw consumers into a cinema-like atmosphere. The animated logo hints at how Netflix is maturing from its streaming-only roots into its production studio aspirations.

Google

Google’s signature graphics need no introduction, but the brand’s animated logo does a fine job of showcasing the wide-ranging services under its umbrella. Through morph animation, the logo carries across brand messaging using just basic shapes and Google’s official colors.

Unlike a Google Doodle, which is a temporary commemorative Google logo animation, the official animated Google logo aims to talk about the tech giant’s future. The smooth animation of the mic morphing into sound waves, and then into a system processing a request, translates into adaptability, scalability, and interactivity.

Other products from the same brand like Google Ads now also have an animated version of their logo.

Apple

Apple has been continuously simplifying its logo ever since it started using its rainbow-striped iconic apple in 1976. The logo’s design has seen a constant shift towards a minimalist look. Given this trend, the company doesn’t have an official Apple logo animation.

However, the brand does leverage the attention-grabbing nature of logo animation on its “Jobs at Apple'' page. Users are met with a rapid-fire loop of animated Apple logos, designed using all the web animation techniques under the sun, from fluid animation, to seamless morphing, to some of the most intriguing 3D logo animation examples out there!

Fiverr

Fiverr’s distinct wordmark logo is associated with the brand’s signature pricing model: the starting price for every digital service on the marketplace is $5. The Fiverr logo animation doesn’t stray too far away from the memorable logotype that its consumers are familiar with.

The Fiverr circle was first used as a holding shape with a fill color that the brand calls Fiverr Green. Now, in the static Fiverr logo, the circle is used as a period at the end of the wordmark.

In the animated logo, an exciting entrance animation takes the lead. It is then followed by a bounce of the Fiverr circle, emphasizing how quickly you can get projects done by hiring their freelancers.

By Lemons

Facebook

Facebook’s new animated logo is meant to distance the Facebook parent company from the Facebook app, helping users to easily distinguish between the two of them. The app’s logo has seen very few changes from its initial design. The most “drastic” tweaks have been a vibrant blue gradient and a round holding shape, revealed after the logo’s redesign in 2019.

For the animated logo, Facebook uses a rather generic logotype, leaving behind the blocky wordmark users easily recognized. The animated gradients display the signature colors of all the apps under the Facebook parent company’s umbrella (blue for Facebook, pink for Instagram, green for WhatsApp, etc.).

Firefox

The entire digital world can easily identify the iconic purple globe with its gradient shades, along with the orange fox with its fire-like tail hugging it. The Firefox logo animation is a true testament of the brand’s evolution!

The animated logo starts off with the brand’s static logo, which then morphs into a stylized, abstract version of itself. The Firefox wordmark only scales, while all the services that Firefox now offers are showcased using only morphing icons and a basic logotype in the brand’s colors. This is another example of how great logo animations can convey a ton of information easily.

The Linkedin brand is easily recognizable thanks to its retro web 2.0 logo, with an executive typeface and black, white, and Linkedin-blue color palette. The design itself speaks to the company’s all-business and practicality-focused mindset.

The Linkedin animated logo follows the same pattern, revealing the platform’s focal points: education and resume building strategies to land you your dream job. The animation starts off with a graduate cap in Linkedin colors and morphs into a briefcase with documents that pop up. The briefcase then scales down and closes to morph into the Linkedin icon, which is a part of the Linkedin wordmark.

By Hamza Quaziz

Nike

This is one of the best SVG logo animation examples on the list! And that’s because it vividly animates the exact meaning behind the original Nike swoosh: a simple fluid design that expresses motion and speed.

Nike’s logo animation has an all-black background, with the Nike swoosh used as a clipping mask. The mask puts into view a fluid animation that alternates between swooshes of magenta and teal gradients. A logo design that’s packed with motion, speed, and creativity!

Master Card

MasterCard’s logo is globally recognized, with its interlocking red and ocher-orange circles, with the brand’s wordmark centered between the two. The logo has been only subtly altered to better reflect the company’s digital-driven attitude.

To illustrate its wide array of purposes in the digital landscape, the MasterCard logo animation shows customers the exciting delights and experiences they can pay for with Mastercard. In a fluid motion, the Mastercard symbol morphs into a stylized taco, followed up with a suitcase, a flashing Polaroid, a map, and then looping back to the brand’s logo.

Coca-Cola

The Coca-Cola logo has played a monumental role in the powerful brand identity behind the market giant that is The Coca-Cola Company.

Coca-Cola’s logo animation unites the abstract bottles of the most consumed Coca-Cola flavors (Coca Cola Classic and Diet Coke) inside the original red disc logo. With this design, and the world famous white-ribbon logotype on top of the “Taste the feeling” wordmark, the animated logo plays into Coca-Cola’s one-brand strategy.

Disney

We’re all familiar with Disney’s magical logo, with the abstract version of the DisneyLand castle serving as a background to Disney’s emblematic wordmark. For many of us, this logo was a childhood emotional trademark for fun and unlimited entertainment, just like Walt Disney intended it to be.

Disney’s animated logo pushes the magical feel of the brand a step further, animating a shooting star that arcs above the castle. Walt Disney Pictures, the production studio, uses this logo animation as an intro to every Disney movie, to set the scene for a world of wonder and wishes granted.

Snapchat

Making its way among the coolest logo animations, the animated Snapchat logo feels like a spellbinding morphing marathon. The design uses just Snapchat's yellow, black, and white color-trio along with line animation to give the brand’s mascot, Ghostface Chillah, a very dramatic entrance.

The ghostly appearance that finally morphs into the Snapchat icon references the brand’s core “phantom” policy, which is to delete pictures after a user-set time limit.

By Alexander Pyatkov

The brand’s entire identity revolves around “pinning” something to a board and saving ideas for inspiration. The Pinterest logo is one of the craftiest pieces of design, having a pin “hidden” in plain sight, being drawn to look like the letter “P.”

Pinterest’s animated logo earns its place among the best logo animation examples we’ve seen. With a cartoonish design, a pin bounces into view and then morphs into the iconic “P.” It’s then followed by a bouncing paperclip that eventually turns into the last two letters of the logo. The animation uses Pinterest’s easily recognizable wordmark and Pinterest red color.

By Max Kravchenko

Reddit’s mascot logo depicts a character that the community knows as Snoo. Snoo is actually a time-traveling, genderless alien with pom-pom ears and an antenna. Nowadays, the Reddit logo is an orange-red flat circle holding Snoo’s face, drawn in thick white lines, followed by Reddit’s black wordmark.

This animated Reddit logo pays homage to the 2005 logo, which had the entire character visible. Snoo bounces into view with its parts floating, and reassembles itself on the dropdown. The LED light flickering at the top of its antenna bounces on top of the “i” in “reddit,” as the wordmark cartoonishly pops up into view.

By Max Kravchenko

McDonald’s

The symbolic Golden Arches in the McDonald’s logo we all know today were initially the identifying mark of the franchise's restaurant architecture. The “i’m lovin’ it” slogan was added to the modern double-arched “M” symbol back in 2003, now known as the longest running McDonald’s brand slogan.

The McDonald’s logo animation is as simple as they come, with the Golden Arches being animated using self-drawing lines. The simplicity of the design reiterates the fact that the brand doesn’t need any frills to make a grand impression.

Dunkin’ Donuts

Nowadays, the Dunkin’ Donuts logo is a digital-friendly and minimalist mix of the brand’s logos between 1976 and 2019. The brand kept the orange and pink colors for their wordmark, in the same plump and round typeface. The noticeable difference is that the logotype is now just “Dunkin’.”

The logo animation, on the other hand, puts on a show with Dunkin’s classic combo: donuts and coffee. With a match-cut technique, the designer seamlessly transitions from a white donut hole to a glazed donut, to Dunkin’s iconic stylized coffee cup. Finally, a swift positioning animation makes room for the OG Dunkin Donuts wordmark.

By Samy Elbadwy

Paypal

Back in 2014, PayPal completely revamped their logo design, changing not only the wordmark but also the icon. The new icon looks like a monogram with the overlapping double “P” in bold italics.

Paypal’s logo animation uses the brand’s corporate colors, animating two-fluid circles to rotate around the brand’s three major selling points. Namely, a globe for global payments, a smartphone and a coin for mobile and cryptocurrency transactions, and a shield for its purchase protection policy.

By Hamza Ouaziz

Sello

Sello is an e-commerce management platform that specializes in marketplace sales. The platform essentially integrates existing online stores into other popular e-commerce services, like Amazon, eBay, or Etsy.

With a play on the concept behind the brand, Sello’s logo animation is simple, yet witty. Using Sello’s slender and rounded typeface, the animated logo keeps the first four letters static, while the “o” morphs into object icons. The “o” morphs into a ring, then headphones, and finally into a bouncing baseball, illustrating the extensive range of products sold through Sello.

By Latham Arnott

Conversable

Conversable, now a part of the LivePerson conversational cloud platform, has a logo that easily ranks as one of the most complex css logo animation examples on this list. The brand offers an AI-powered digital space for brand-to-consumer conversations.

The animated logo starts with a slight chromatic aberration effect, mixed with a glitch effect that looks like digital-distortion, with a pop-in entrance of the Conversable character logo. The spaceman’s face shield is actually a speech bubble, hinting at the brand’s messaging channels.

By Chenglei Wu

How to animate a logo with SVGator

Now that you’ve seen some of the craftiest logo animation inspiration examples, it’s time to create your own. Let us show you how to easily animate a logo, even if you're not familiar with CSS/Javascript coding! SVGator is the logo animation software that will automatically generate the animated logo’s code for you.

Step 1. Sign up for SVGator or log in

Create a new SVGator account, or log in, and start a new project.

Step 2. Create an SVG logo from scratch or import one into SVGator

Import a static SVG logo, or, better yet, create a new one from scratch using our SVG editor. SVGator’s pen tool, transform tool, node tool, and snapping options allow you to effortlessly:

create perfectly straight lines and proportional shapes
edit compound shapes and custom paths
move/add/remove nodes
adjust Bezier curves.

Step 3. Animate your SVG logo

Edit your logo animation live, select elements and add animators to the timeline, and see changes as you go, for a smooth workflow. Rotate, scale, add filters, change colors and gradients, morph, convert shapes into paths, or experiment with clipping paths and clipping masks. The sky’s the limit!

Step 4. Export your logo animation & add interactivity settings

Export your animated logo, choose the animation type (CSS/JavaScript), and select your interactivity settings in the same intuitive panel. SVGator will then generate a single SVG file with ready-to-use code.

Conclusion

Animated logos have never been easier to create. Time to put your freshly replenished inspiration to work with SVGator. Start your new logo animation project here!

How to Optimize SVG Animations to Improve Your Page Speed Insights Score

SVGator — Mon, 11 Apr 2022 10:48:09 +0000

In today's fast-paced world, speed is more important than ever, and this is also true when it comes to your website. If you want to learn how to optimize your SVG animations for faster page speed and better user experience, join us to explore everything you need to do to achieve your goals.

Let's say you found a cool SVG and want to use it on your website or mobile app. You download it, import it to SVGator, add some cool animation effects, export it, and upload it to your web page. Unfortunately, now someone from your team or your client notices that although the website looks way better than before, the load time also increased.

If this sounds familiar, you’re not alone. We’ve all been there, and that’s why we are providing you with the means of using optimized SVGs for peak performance.

First, let’s see what PageSpeed is and why it’s an important metric that you should keep an eye on every time you make changes on your website.

What is PageSpeed score and why it’s important

Google provides webmasters with a PageSpeed Insights tool to help them measure and improve their Page Speed. It provides information about your page speed load and offers numerous tips on how to improve it, from the most basic changes you can make to more complex optimizations. You can also use Google’s Lighthouse Page Speed tool to measure page quality in real time.

At this point, you might be wondering how important page speed is for SEO and user experience, and the answer is simple: if you have a good page speed score, your page loads fast and provides a good user experience. As a result, Google considers that your page is more valuable and may rank it higher.

How to improve your Google page speed score

You probably found this article because the Google PageSpeed Insights tool told you that your website is slow and that you should improve it.

Below, you’ll find some tips on how to increase your page speed score, along with good practices on how to make your page load more efficiently by using SVG animations, created with SVGator.

Importing SVGs

There is a great tool that can optimize an SVG, and it's open-source. It's called SVGO. It also has an interface where you can upload your SVG, toggle some buttons, and check the results in real time. However, beware that some options might change the SVG and lead to undesired changes.

There is also an export plugin for Illustrator based on this tool.

If you use Illustrator to create the SVGs you animate, make sure you take advantage of all the features that can help you create a lightweight SVG file.

Use a simplified path to draw your illustration. Avoid setting your Pencil or Brush tools to Accurate since this might create more nodes than necessary and increase your file size and complexity.
Use a Path to create a dotted line, rather than a series of individual circles.
Avoid using textured brushes, as they can seriously impact your file size.

Optimizing the loading time of SVG Animations

When you have multiple animations on your page, First Contentful Paint (FCP) or page load speed could take a hit because the browser needs to evaluate all javascript before the render happens.

An animated SVG has javascript inside, and if the animations are complex, that means the javascript code is also complex, making the browser do more work before it can display the first-page render.

One way to avoid this is by not loading the javascript from SVGs until the page is fully loaded. This leads in turn to faster load times and a more responsive page.

In order to achieve this, you must search for the script tags inside the SVG, extract that javascript, and place it in an external file, which in turn you could set to load whenever an event gets triggered.

Optimizing player

The player is the javascript part that does all the animation, and it is written in javascript. This is usually found inside the script tags among the rest of the javascript. Until recently, the player was always embedded inside the SVG, but now we've added the possibility to load the player from our CDN. The player is stored on CloudFront, and it is pretty fast because it's cached on AWS edge locations all around the globe. This means that whenever a user accesses your page, the player will be downloaded from the closest server, thus reducing load time. Furthermore, it will be cached by the browser for further requests.

This is a great optimization that you can take advantage of just by checking an export option.

When multiple SVGS are having the use external player option, the player is downloaded only once and used by all the animations. This is much faster than using the embed option, which puts the player in every SVG.

Optimizing the SVG animation’s start

Another great optimization is to start the animation on scroll. SVG animations are quite small in comparison to gifs or videos, but when you have a lot of them, they can use a bit more CPU than expected, making your site navigation a little laggy. This is because browsers usually use a single thread for each tab and don’t take advantage of the rest of the CPU cores. So, by using start on scroll, your animations will not start until a portion of the SVG is visible. This is customizable, and you can set at what percentage of the viewable SVG the animation starts.

Optimizing the exported SVGs

If you just need a simple animation that starts on hover or on load, then the CSS export option might be for you. CSS animations use GPU for the render process, which means these are faster and more efficient. You can also use them in CSS background property, img, and object tags. Please note that in these tags, the SVG will animate only on load.

The downside of CSS animations is that not all the animations are supported in all browsers, and they have fewer interactivity options. You can check the supported options on our help page.

The most common elements in an SVG are Paths. These are SVG elements that are made of points that are connected with a line. The roughness of the line depends on the number of points. If the line were a road, more points result in a smooth ride, and with fewer points, you should prepare for a bumpy ride.

While visually, a path can appear as desired, sometimes it can have an awful lot of points, much more than necessary. This can make your SVG very heavy and use more CPU than needed. There are some tools that can trim down the overweight from an SVG and make your life easier.

One of the tools we found super useful is SVGOMG, which can help to reduce the size of your exported SVG. Once we managed to reduce the size of an SVG by about 30%, but this is not always the case. If your SVG is already well-formed then you won’t see a size reduction. This step is mostly recommended at import, before animating your SVG, but sometimes you can make it work at export, too. While most options break the animation, some are super useful, depending on the animators you used and the elements.

Using gzip to reduce the SVG size

SVGs exported from SVGator are already minified for a better size reduction, but what if we told you that you can reduce their size even more? One way to do this is to use gzip assets for your website. This is a bit harder to do because it requires some server side magic.

First, you have to enable gzip on your webserver. This step can differ depending on your setup, but the most important thing is that the web server should add a header that looks like this: “Content-encoding: gzip.” After doing this, you have to make sure that your deployment process compresses assets as gzip and then you should be good to go. There are a ton of articles on the web on how to do it — here’s an example.

Lazy loading your SVGs

Another practice to improve your score is to lazy load SVGs. This works by loading the SVGs only after the page has been fully loaded. This is also different depending on the framework used and programming language. So you should search for a lazy load solution that works best for you. This can be achieved by placing the SVG into an object, and rather than using the normal attribute data, use another one, like data-object. After the page is loaded, you just need to change the attribute data-object to data and the SVG will load. You could trigger this behavior on scroll or another event a user could make. Make sure to set the width and height of the object to the width and height specified in the SVG. This way, the browser knows the aspect ratio for the box where the SVG will be rendered. This is also needed so that when the SVG is rendered, the content is not shifted down.

Conclusions

All in all, page speed matters, both for Google and your website’s visitors, so it’s high time to optimize your visuals, too. Improving your PageSpeed score will provide your users with a smooth experience and improve your chances of getting a high Google ranking.

We hope that you found these tips useful and that you will be able to optimize your SVG animations. Your works of art deserve to be viewed and admired faster from any device!

Free Animated Ecommerce Icons to Help You Sell More

SVGator — Mon, 11 Apr 2022 10:23:19 +0000

Conversions can be influenced by the tiniest of details, and in the case of online stores, even the ecommerce icon set you’re using can be a decisive factor in turning unique visitors into repeat customers. Animated SVG ecommerce icons made with SVGator will help lift your UI/UX work to new dimensions with an intentional approach for engaging customers.

Intentional engagement is easier to achieve when you add animated and interactive UI elements, like icons, into the mix. While we won’t brush aside the importance of backing up your UI/UX designs with optimal performance, going the extra mile is what we stand for here at SVGator.

With user-centric designs in mind, we’re happy to release our Free Animated Ecommerce Icon Bundle to help you get a headstart on creating the ultimate online shopping experience on the web, and on mobile with in-app animations! You can download both the animated and static ecommerce icon packs free. Read on to see how you can customize your free animated assets with SVGator.

Before we get to the goodies, go on a deep-dive with us to learn how animated ecommerce icons are changing the digital market game. Tips on must-haves and how you can design and animate your own ecommerce icon pack are included!

Create the Ultimate Online Shopping Experience with Animated Ecommerce Icons

Designing the greatest ecommerce customer experience is much like setting up a physical store. The main intent is to create the ideal atmosphere for the end goal: sales, a.k.a conversions. In both circumstances, the mission is to build an emotional connection and trigger that strong impulse that makes shopping feel like therapy.

Chain stores take advantage of that “feel good” state, attracting customers with a relaxing ambiance, strategic product placement, etc. On the web, and on mobile, we shape the ultimate user experience using performant design, easy-to-navigate layouts, and captivating and intuitive user interfaces — which include icons!

The potential of using animated ecommerce icons is sometimes overlooked because we’re so focused on getting all the other crucial features sorted first. However, this should become an essential element in your eCommerce personalization, marketing, and branding strategies. While integrating your payment solution is vital, you can miss out on having a much more customer-centric UI if your iconography is simply an afterthought in the development process.

But why animated icons? The answer is linked to the five key objectives that the perfect ecommerce icon pack will help you achieve:

User engagement via interactivity

Animate your online store icon pack with SVGator and use hover effects and on-click/on-tap triggers to boost the interactivity factor, and user engagement along with it. Turn your price tag icon into a party popper with discount percentages you offer, or reveal what payment options you offer with an interactive wallet icon. Animated assets are ideal for a memorable online shopping session!

Branding

The best ecommerce icons for your brand are those that you can easily blend in with the rest of your branding strategy including your video marketing campaign. That’s the reason why SVGator’s animated free vector ecommerce icons are entirely customizable. Use them to strengthen brand recognition by customizing the online shop icon set to be in line with your brand’s aesthetic, or include your mascot in the ecommerce app icon. The editing possibilities are endless and only a few clicks away!

And to take your brand strategy a step further you can create entire animated videos that will have a lasting impression on your audience and boost the success of your brand awareness campaigns. Use the services of a leading video animation company to bring the best results for your marketing strategy.

Performance

Animated vector ecommerce icons won’t hinder your store’s performance, be it on the web or on mobile. The exported files (.svg, .js, .dart) are optimized and lightweight — ideal for lightning-speed loading and the smoothest transitions. Get tips from SVGator’s React Native and Flutter implementation guides for even smaller file sizes using Single Player Mode.

Usability

Improved usability on an ecommerce platform relies on efficiency. For example, in a text-heavy design with lots of product descriptions, an animated online shopping icon set will help anchor content, making it easier for users to navigate the store’s UI.

What better way to secure the efficiency of your customer-centered design than by guiding the user at all times with engaging visual cues? Do this with animated discount tag icons for your “Sales” section, or with a morphing “payment-options” icon for quick and easy checkout.

Style

While online transactions aren’t as glamorous as a shopping spree at the stores of NYC’s Fifth Avenue, the endorphins associated with retail therapy are still there. Choosing the right UI elements is one way to recreate that shopping experience that online buyers desire!

Animated icons are the finishing touches of a UI that instills the feel of a high-end shopping session.The truth is that presentation sells, and the flair of your online shop’s icons should help you achieve this. Like the soft-touch packaging of a luxurious brand, the ecommerce icons you use should be aesthetically pleasant and enticing.

Stick around and find out how you can create your own animated ecommerce icons with SVGator and export them ready-to-use for the web and for iOS/Android apps with no code writing at all!

Animated Ecommerce Icon Essentials & SVGator Freebies

UI design trends typically get reflected across all of the digital brand assets of an ecommerce business, from mobile onboarding screens to buttons, toggles, and, you guessed it, icons. Animating interactive UI elements is a future-proof approach that’s compatible with any popular design style.

Create smooth color transitions for gorgeous gradient icons, or put in motion isometric, doodle, monochromatic, gliph, or minimalist icons. Whatever trend fits your shop’s UI best, SVGator will always export your animated ecommerce icons as lightweight, ready-to-implement files (web and mobile exports!).

Your essentials, in terms of ecommerce icons, have to be lightweight, on-brand, discernible, and informative. Animation is the cherry on top! So, which ecommerce icons are must-haves?

Animated Ecommerce Shopping Cart Icon

A captivating shopping cart icon is an indispensable asset for any ecommerce store’s UI. It is the visual cue that is most likely to help you increase conversions. An animated cart icon will garner attention easily, making the user’s journey from browsing to hitting the “confirm order” button shorter.

Make the icon interactive with hover effects or on-click/on-tap triggers to make checking the cart feel even more like a personal interaction with your brand.

Animated Ecommerce Store Icon

Guide website visitors to your online store with a bubbly animated store icon! There’s nothing worse than seeing sky-high bounce rates after you’ve put in the effort to create an outstanding online shopping experience. Setting your animated shop icon to start “on load” will instantly increase the chances of your marketing efforts being rewarded with an increased conversion rate. Push your store front and center by focalizing the user’s attention on the goodies that are just one click away.

Animated Ecommerce Payment Icons

The days of “cash or card” are long gone, and now there are countless online payment services that customers can use to complete their online transactions. Wrap up these crucial pieces of information conveniently with animation! You can morph icons to display the most popular payment options, or simply use the animated icon to indicate where the user can easily find out more about all the available payment methods on your ecommerce platform.

Animated Ecommerce Filter Icon

Product filtering is one of the most convenient features an ecommerce platform can have. If your online store has a generous selection of products, it’s easy for customers to get overwhelmed and just bounce off the page. Animate your filter icon to make it easy and intuitive for shoppers to shortlist their searches and hit the “Buy” button quicker!

Animated Ecommerce Customer Support Icon

Just as providing excellent customer service is a crucial part of building a user-centered ecommerce business, making customer support easily accessible to users is a must. When a client is searching for ways to contact you while shopping, frustration levels are already on the brink of rising due to the difficulties they’ve encountered. Use an animated customer support icon to preemptively make it obvious to users that you’re there to help every step of the way!

Animated Ecommerce Gift Box Icon

Gift box icons are versatile and can signify different things, depending on the extra perks that your online store has. Shops typically use this icon to indicate that they sell gift cards, offer gift wrapping services, or that the item is suitable for gift-giving. Animating this icon can eliminate any sense of confusion and make the icon’s intent clear from the get-go, making the shopping experience on your mobile app or website that much more intuitive.

Animated Ecommerce Trust Seal Icon

Trust seal icons are essential UI elements that help you build up your online store’s image as a trustworthy, authentic, and reliable place to shop from. Cyber fraud of all kinds makes it hard for businesses to prove themselves to their customers, especially when it comes to newer prospects. An animated trust seal icon will help move users past that psychological barrier, and increase the chances that they will go through with their online purchases trustingly.

Animated Ecommerce Discount Tag Icon

Sale tag, price drop, discount tag icons — they’re all meant to increase the sense of urgency that speeds up the decision making process behind online shopping. But when your ecommerce platform’s UI is saturated with static red sale tags, the effect is not as impactful. Escalate the conversion influence of deals that clients won’t want to miss out on with an animated discount tag icon. Captivating and effective!

Animated Ecommerce Shipping/Delivery Icon

In the era of contactless deliveries, finding shipping information for the physical products that you’re selling should be foolproof. Use an animated delivery icon to:

redirect users to a comprehensive “Shipping & Delivery” page
guide shoppers to the “Delivery” section during checkout
indicate that you offer a shipping rates calculator
highlight that the product the customer is currently viewing includes free shipping

Interactive animation easily guides the user’s attention to these key details that all customers look for when shopping online!

Animated Ecommerce Icon Set (FREE!)

One of the seven principles of icon design is consistency, which is paramount to creating a cohesive user interface and smoothening the business communication between shoppers and your online store’s UI. To help you implement consistent iconography within your design, we’ve created an ecommerce icon set that includes all the essentials needed for an outstanding online shopping experience. And you can download it for free!

What does the free animated ecommerce icon set include?

Static SVG ecommerce icons (including all of the must-have icon types listed above!)
All static icons included in the free ecommerce icon pack come in three different styles: Outline, Solid Duotone and Colorful Duotone
Animated SVG ecommerce icons
Interactive animated SVG ecommerce icons
Animated SVG icons in .dart format for Flutter
Animated SVG icons in .js format for React Native

The perks don’t stop there! You can fully customize all the free-for-download ecommerce icons with SVGator and align them with your brand’s image with just a few clicks. No code writing and no extra plugins/software installs required!

Let’s find out how!

How to Customize Your Free Ecommerce Icons With SVGator

Static Ecommerce Icons

Customize and animate the free static ecommerce icons from SVGator with the Free Forever Plan by creating a new project and importing the icons into the editor.

Change the stroke or fill color, size, etc. using the animator’s intuitive interface.
Once the icons have an on-brand appearance, you can move and animate the icons as you please — going as subtle or as effervescent as you see fit.

You can apply this iconography designing method with any imported icon, as long as you have it in .svg format. If you’re on a short deadline and don’t have time to create your icons from scratch in our editor, you can use an icon marketplace like Iconfinder. Import your downloaded ecommerce icons from there to customize and animate them with SVGator.

Animated and Interactive Ecommerce Icons

Customize animated ecommerce icons with the Pro Plan by simply accessing the SVGator library and adding them to your project. You can fully customize these animated assets and turn them into sale-magnets, as part of the ultimate online shopping experience!

The work behind the smooth transitions and impeccable style continuity has already been done by SVGator’s team of designers. All you have to do is make the animated icons match your store’s identity.

You can also define the interactivity settings of the animated icons as you see fit, and export them to be used on the web (as .svg files) or on mobile apps (as .js files for React Native or as .dart files for Flutter).

Conclusion

Get a headstart on selling more, increasing customer retention rates, and offering a top-notch online shopping experience with our free animated ecommerce icon set! Guide shoppers with engaging and usability-centered iconography that you can easily customize to fit your brand with SVGator. Get started here!

Download SVGator-made animated ecommerce icon essentials and find out how each of them can help you secure more online sales!

Programmatic Animation Control | Introducing SVGator’s Player JS API (Link to LIVE Demo)

SVGator — Tue, 05 Apr 2022 14:31:31 +0000

We’d like you to meet SVGator’s newest feature: Player JS API – an event driven interface that gives you full-scale control over SVG animations created with our online animator. It is designed to be a command center that any digital creator who knows their way around basic coding can use to take programmatic animation to the next level.

SVGator is an SVG animation tool that has been centered around opening up the world of motion graphics to artists with little to no code writing skills. The natural move forward was to circle back to the crew that makes no-code tools possible: developers! The Player API is made to help developers do what they do best: solve problems using the most efficient methods (both time and effort-wise).

Check out our LIVE Demo and then read Player JS API’s documentation to explore all the ins and outs of this new way of controlling web/mobile animations exported from SVGator.

Here’s a brief look at SVGator JS API’s properties, methods and the event interface you can have control over:

Player Properties

player.currentTime
player.duration
player.hasEnded
player.isAlternate
player.isPlaying
player.isRollingBack
player.iterations
player.state
player.totalTime

Available Player Methods

Each player.method() call returns the player API object itself.

.play()
.pause()
.restart()
.reverse()
.toggle()
.stop()
.ready(callback)
.seek(offsetPercent)
.seekBy(offsetMs)
.seekTo(offsetMs)
.destruct()

Available Player Events

play
pause
restart
reverse
stop
end
keyframe

Note: The first 5 events are triggered from user actions as well, not only from API calls (i.e. if the animation starts on click).

If you’re looking to create an engaging user experience, the tool’s settings for interactive animation are a considerable asset. But if you are aiming for a higher complexity and a broader range of interaction for your graphics, programmatic animation is the way to go.

What next?

Check out the basics on how to animate programmatically and learn more about how to access the Player object and how to synchronize events.

Find out how to trigger an SVG animation manually using JavaScript.

Start your next project and use extensive programmatic control to create stunning interactive animations easier and faster than ever before!

New to SVGator? Check out this list of its latest features or get a crash course on the best practices from the tool's design team including the founding members.

Keep in mind that there’s no third-party software/plugin that you need to start using SVGator to its fullest potential. It is a browser-based SVG animator that exports lightweight files for both web and mobile platforms (.svg, .js, and .dart).

Have any questions? Want to leave a suggestion? Wanna chat about how awesome animating is? Let’s connect on Facebook, Instagram or Twitter!