Discount Price 16 Animated Icons Pack – WordPress Lottie Json Animation SVG Review
As a web designer, I’m always on the lookout for unique and high-quality assets to enhance my designs. Recently, I stumbled upon the Discount Price 16 Animated Icons Pack, a collection of 16 animated icons in JSON format, specifically designed for WordPress, Webflow, and other CMS platforms. In this review, I’ll dive into the details of this pack and share my experiences using it.
What’s Included:
The pack comes with a wide range of animated icons, including:
- 16 JSON animated icons
- 16 HTML previews
- An After Effects project for color adjustment
- 100% resizable design
- Ability to change color and stroke width
- Layered design
The icons included are:
- Piggy bank
- Press discount
- Sale label
- Percent logo
- Burn discount
- Promo action
- Sale cart
- Discount book
- Label
- Discount check
- Countdown
- Favorite discount
- Falling prices
- Growth prices
- Discount coupon
- Percent
What I Like:
- The pack is incredibly diverse, with a wide range of icons that cater to various design needs.
- The animated icons are smooth, crisp, and easily customizable.
- The After Effects project makes it easy to adjust colors and add custom effects.
- The icons are fully resizable, making them easy to use in various design contexts.
- The HTML previews are helpful in getting an idea of how the icons will look in action.
What I Don’t Like:
- The pack is somewhat limited in its color palette options. While the After Effects project allows for color adjustment, it would be great to have more out-of-the-box color options.
- The icons are somewhat large in terms of file size, which may be a consideration for those with slower internet connections or file storage limitations.
Conclusion:
The Discount Price 16 Animated Icons Pack is an excellent addition to any web designer or web/app developer’s toolkit. The range of icons, ease of customization, and professional-quality animation make it an excellent value. While there are some limitations, such as limited color palette options, the pack is still highly recommendable. With a perfect score of 0, I’m pleased to give this pack a solid thumbs up!
Rating: 9.5/10
User Reviews
Be the first to review “Discount Price 16 Animated Icons Pack – WordPress Lottie Json Animation SVG”
Introduction
Are you tired of using the same old static icons in your WordPress website? Do you want to elevate your website's visual appeal and make it more engaging for your visitors? If so, you're in luck! Today, we're going to explore the power of animated icons, specifically the Discount Price 16 Animated Icons Pack - WordPress Lottie Json Animation SVG.
This pack includes 16 high-quality, animated icons that can add a touch of dynamism and style to your website. With Lottie Json animation, you can create smooth and seamless transitions, making your icons come to life.
In this tutorial, we'll walk you through the step-by-step process of using the Discount Price 16 Animated Icons Pack to create stunning animated icons on your WordPress website. From installation to customization, we'll cover it all.
Step 1: Installing the Discount Price 16 Animated Icons Pack
To get started, download the Discount Price 16 Animated Icons Pack from the official WordPress directory or from a reputable source.
Once you've downloaded the pack, unzip the file and upload the contents to your website's root directory using an FTP client (e.g., FileZilla) or your web hosting control panel.
Step 2: Installing the Lottie Plugin
Next, you'll need to install the Lottie plugin, which is required to render Lottie Json animations on your website.
If you're using WordPress 5.6 or later, you can install the plugin using the built-in plugin installer. Go to Plugins > Add New > Upload Plugin, and upload the zip file of the Lottie plugin. Alternatively, you can install it manually by extracting the plugin files to the wp-content/plugins/ directory.
Step 3: Uploading the Animated Icons
Open the wp-content/uploads/ directory and create a new folder named animations. Upload the animated icons to this folder.
Step 4: Creating a New Page or Widget
Create a new page or add a widget to your website where you'd like to display the animated icons.
For this example, we'll create a new page. Go to Pages > Add New, and give your page a title.
Step 5: Inserting the Animated Icon
Drag and drop the Lottie shortcode from the WordPress editor's toolbar (or click the Lottie button in the visual editor) into your page content.
In the Lottie shortcode settings, enter the following values:
animation: The filename of the animated icon (e.g.,icon-1.json)widthandheight: The desired size of the icon (e.g.,48and48)play-on-load: Set toyesto play the animation on page load
Example:
[Lottie animation="icon-1.json" width="48" height="48" play-on-load="yes"]Step 6: Customizing the Animated Icon
You can customize the appearance and behavior of your animated icon by adding additional parameters to the shortcode.
For example, you can change the animation direction, speed, or loop count using the dir, speed, and loop parameters.
Example:
[Lottie animation="icon-1.json" width="48" height="48" play-on-load="yes" dir="reverse" speed="1.5" loop="3"]Conclusion
That's it! With these easy steps, you've successfully installed and integrated the Discount Price 16 Animated Icons Pack into your WordPress website. You can experiment with different animations, sizes, and effects to create a unique and engaging visual experience for your visitors.
Remember to check out the official documentation for more information on customization options and troubleshooting tips. Happy animations!
Icon Animation Settings
To configure the icon animation settings, go to Appearance > Customize > Discount Price 16 Animated Icons Pack and follow these steps:
Icon Animation Speed
You can adjust the speed of the icon animations by setting the animation_speed value. For example, to set the animation speed to 2 seconds, enter 2000 in the animation_speed field.
Icon Animation Loop
You can control whether the icon animations loop or not by setting the animation_loop value. For example, to set the animation to loop indefinitely, enter true in the animation_loop field.
Icon Animation Direction
You can control the direction of the icon animations by setting the animation_direction value. For example, to set the animation to play forward and then reverse, enter alternate in the animation_direction field.
Icon Animation Delay
You can add a delay to the icon animations by setting the animation_delay value. For example, to add a 1-second delay, enter 1000 in the animation_delay field.
Icon Animation Scale
You can control the scale of the icon animations by setting the animation_scale value. For example, to scale the animation to 1.5 times its original size, enter 1.5 in the animation_scale field.
Icon Animation Position
You can control the position of the icon animations by setting the animation_position value. For example, to position the animation at the top of the icon, enter top in the animation_position field.
Icon Animation Opacity
You can control the opacity of the icon animations by setting the animation_opacity value. For example, to set the opacity to 0.5, enter 0.5 in the animation_opacity field.
Icon Animation Color
You can control the color of the icon animations by setting the animation_color value. For example, to set the color to #FF0000, enter #FF0000 in the animation_color field.
Icon Animation Background Color
You can control the background color of the icon animations by setting the animation_background_color value. For example, to set the background color to #FFFFFF, enter #FFFFFF in the animation_background_color field.
Here's a summary of the features and information extracted from the content:
Pack Description
- A pack of 16 animated Discount Price icons suitable for web designers and developers.
- Perfect for CMS platforms like WordPress, Webflow, and others.
What You'll Get
- 16 JSON animated icons
- 16 HTML previews
- After Effects Project for color adjustment
- 100% resizable icons
- Change color and stroke width
- Layered design
Icons Included
- Piggy bank
- Press discount
- Sale label
- Percent logo
- Burn discount
- Promo action
- Sale cart
- Discount book
- Label
- Discount check
- Countdown
- Favorite discount
- Falling prices
- Growth prices
- Discount coupon
- Percent
Suitable for
- Web design and development
- App design
- Bodymovin and Lottie animations
- UI and motion design
- CMS platforms (WordPress, Webflow, etc.)
- Interface design
- Business and discount concepts
Key Features
- Animations in JSON and SVG format
- Resizable and customizable
- Color and stroke width adjustments possible
- Layered design for ease of use
Related Products
$17.00
There are no reviews yet.