This article talks about Stories by Freepik that allows you to create custom animated illustrations online for free. Stories by Freepik is a new project by Freepik that has an incredible collection of SVG illustrations with decent variety. Users can browse the project website to browse, search, and filter illustrations for their specific needs.
All the illustrations are fully customizable that allows users to not only change the color and background but also shows all the layers of the illustrations. Users can show/hide the layers as per their needs and download the illustration either as an SVG or PNG file. All the illustrations are free to use under the Freepik license (free for personal and commercial purposes with attribution).
This project also lets you animate the illustrations. It has an animation editor where users can add entrance and looping animation to any layer of the illustration. The animation is also customizable with options to adjust the animation duration, delay, etc. After adding the animation, the illustration can be downloaded as a GIF or Video in custom dimensions. It also offers embed code for the illustration with delay animation, instant animation, and separate code for SVG and CSS. With that said, let’s dive in and check it out in more detail.
Also read: How to Convert SVG Clip-Path to Relative Online?
Create Custom Animated Illustrations Online
Stories by Freepik is a new project by Freepik although you don’t need an account to access the project website. The website is similar to the original Freepik website where you can search the illustration and browser the collection by colors, backgrounds, styles, and tags.
Clicking on an illustration opens it in a popup where you can customize the illustration, copy URL, and download. It also offers recommendations for similar content in other styles and suggestions based on the tags to help you easily find what you seek.
Customize Illustration
In the popup, you can customize the illustration as per your needs. Right to the illustration preview, you get options to customize the color, background, and layers of the illustration. The color option allows you to replace the primary color of the illustration with any color from an RGB color palette. The background option allows you to keep the background simple, detailed, or hidden. Last but not least, the layer option lists all the layers of the illustrations. This allows you to show/hide any layer to keep or hide particular elements in the illustration. At this point, you can download the customized illustration either as an SVG or PNG file.
This popup also has an animate button at the top that opens the illustration in an editor where you can add animation to it.
Animate Illustration
The animation editor shows the illustration in the middle with all its elements grouped on the left. You can pick any element of the illustration and animate it. When you pick an element, the editor shows you the animation options for that element on the right side. These options allow you to add two types of animation effects to the illustration; Entrance and Looping. In either case, you get a handful of animation options to choose from which you can further customize to change the animation duration, delay, and easing.
Export Animated Illustrations
After animating the illustration, you can export it to get a copy. This project offers pretty decent export options where you can pick the animation type, background color, and size of the final output. Then, you can download it either as a GIF image or a video file. And, if you are planning to use the illustration on webpages, it got that covered too. From the export screen, you can copy the embed code for SVG and CSS separately and then get the delay animation and instant animation code too.
Wrap Up
Stories by Freepik is an impressive source of customizable illustrations for various types of projects. It not only offers a collection but also allows us to customize the illustration accordingly prior to download. The whole scenario is straightforward and you don’t have to be a design export, everyone can use it easily. It’s a great source for digital marketers as well as designers to get perfectly tweaked illustrations for their projects. Try it yourself and share your thoughts with us in the comments section.
