Adding Animated Icons

Animations make user interfaces intuitive and prompt site visitors to engage with your site. The right amount of animation can engage the audience and also guide them to the CTAs making them more likely to convert.

Engaging animation triggers come in many styles and actions like the one below which is intended to prompt the user to click. Insert GIF

Isn’t it cool?

We have a wide range of over 300+ animated icons that you'll simply love! With more content being added as swiftly as possible.

To add an animated icon to the field,

Select Add Animated Icon option from the drop down.

Clicking on Add Animated Icon button will open a popup showing all the animated icons sorted by category.

Select the icon you want to add. This will activate the styling editor.

You can change the primary color, secondary color, stroke width and the animation trigger event in the styling editor.
Once you are happy with the changes, select the Done button to add animated icon to the field.

Changing Stroke Colors#

OnePlugin Fields let you change the primary and secondary stroke colors of the selected animated icon.

You can do that by clicking on the color palette and after selecting the color, you have to click on the Apply button. This will update the icon preview for you to verify the changes.

You can also set the default colors in the Settings page to reflect the color theme of your website. This will save you the hassle of doing this every time you select an icon.

Changing Stroke Width#

OnePlugin Fields also lets you increase or decrease the stroke width using the slider control.

Changing Animation Triggers#

OnePlugin Fields lets you decide when the animation should begin and how it should behave using animation triggers.

Currently we support following animation triggers

Loop - Animation will loop forever.

Hover - Animation will begin only on mouse hover over the icon.

Click - Animation will begin only when mouse click happens on the icon.

Loop on Hover - Animation will begin and will loop forever when mouse hover over the icon for the first time.

Morph - Animation will play from the first frame to the last frame and then will stop. Animation will play in reverse after you move the mouse away from the icon.

Morph Two Way - Animation will play from the first to the last frame and then reverses.

ℹ️note

Not all animated icons support Morph and Morph Two Way

Displaying selected animated icon#

Displaying the selected animated icon is very simple.

In your twig file, add

// entries.asset is the Craft CMS field name{{ entries.asset.render() }}

Rendering options#

The render() function accepts parameters which will be passed directly to the rendered output tag.

So for instance, the below code

// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','hello':'world'}) }}

will result in

<one-plugin src=... class='row-flex col-sm-3' hello='world'></one-plugin>

Having said that, there is an exception.

Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the width and height parameters along with an extra attribute called size, value of which should be set to true.

// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}

will result in

<one-plugin src=... style='width:100px;height:100px;'/>

Available Twig Method#

type() - Returns string 'aicon'.

// entries.asset is the Craft CMS field name{{ entries.asset.type() }}