{"id":725,"date":"2018-05-20T12:21:51","date_gmt":"2018-05-20T12:21:51","guid":{"rendered":"https:\/\/holithemes.com\/plugins\/click\/?p=725"},"modified":"2018-05-20T12:21:51","modified_gmt":"2018-05-20T12:21:51","slug":"animations","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click\/animations\/","title":{"rendered":"Animations"},"content":{"rendered":"\n<p>Animations for Floating Styles<\/p>\n\n\n\n<p>By Default Animation are not Enabled,<\/p>\n\n\n\n<p>To Enable the Animations,\u00a0 go to the plugin settings and check the Animation filled option.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/05\/Enable_Animations.png\"><img decoding=\"async\" width=\"543\" height=\"104\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/05\/Enable_Animations.png\" alt=\"enable animations\" class=\"wp-image-882\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/05\/Enable_Animations.png 543w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/05\/Enable_Animations-300x57.png 300w\" sizes=\"(max-width: 543px) 100vw, 543px\" \/><\/a><\/figure>\n\n\n\n<p><br\/>By Default &#8216;<strong>Bounce<\/strong>&#8216; type of Animations are added.<\/p>\n\n\n\n<p>To Change the Animation type to<br\/><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\t<li><a href=\"https:\/\/holithemes.com\/plugins\/click\/change-animation-type-to-slideindown\/\"> slideInDown <\/a><\/li>\n\t<li><a href=\"https:\/\/holithemes.com\/plugins\/click\/change-animation-type-to-flipinx\/\"> flipInX <\/a><\/li>\n\t<li><a href=\"https:\/\/holithemes.com\/plugins\/click\/change-animation-type-to-swing\/\">swing<\/a><\/li>\n\t<li><a href=\"https:\/\/holithemes.com\/plugins\/click\/change-animation-type-to-tada\/\">tada<\/a><\/li>\n\t<li><a href=\"https:\/\/holithemes.com\/plugins\/click\/change-animation-type-to-fadein\/\">fadeIn<\/a><\/li>\n<\/ul>\n\n\n\n<p>To Change the Animation Settings,<\/p>\n\n\n\n<p>Click -> Customize Styles &#8211; Animations\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_customization_-_default.png\"><img decoding=\"async\" width=\"1207\" height=\"868\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_customization_-_default.png\" alt=\"Default animations\" class=\"wp-image-884\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_customization_-_default.png 1207w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_customization_-_default-300x216.png 300w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_customization_-_default-1024x736.png 1024w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_customization_-_default-768x552.png 768w\" sizes=\"(max-width: 1207px) 100vw, 1207px\" \/><\/a><\/figure>\n\n\n\n<p><br\/>Animation Duration &#8211; Time to complete one animation cycle.<\/p>\n\n\n\n<p>E.g: To Complete one Animation cycle in 500 milliseconds add 500ms or add 1s for 1 second.<\/p>\n\n\n\n<p>Animations on Hover: Select &#8216;Yes&#8217;, To Apply the animation when mouse hover the Style.<\/p>\n\n\n\n<p>To Change the Animation Style &#8211; Change the Animation class name, Animation Code.<\/p>\n\n\n\n<p>We can get the animations code from one the open source project hosted on GitHub &#8211;\u00a0<a href=\"https:\/\/github.com\/daneden\/animate.css\/\">animate.css<\/a><\/p>\n\n\n\n<p>We can choose the Animation style here &#8211;\u00a0<a href=\"https:\/\/daneden.github.io\/animate.css\/\">https:\/\/daneden.github.io\/animate.css\/<\/a><\/p>\n\n\n\n<p>and can get the code from the repository &#8211;\u00a0<a href=\"https:\/\/github.com\/daneden\/animate.css\/tree\/master\/source\">https:\/\/github.com\/daneden\/animate.css\/tree\/master\/source<\/a><\/p>\n\n\n\n<p>Add the animation\n\t<g class=\"gr_ gr_3 gr-alert sel gr_spell gr_replaced gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace\" id=\"3\" data-gr-id=\"3\">CSS<\/g> code in the &#8220;<strong>Animation code<\/strong>&#8221; block\u00a0and change the Animation Class name.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p>For E.g. To change the Animation style to &#8220;<strong>flash<\/strong>&#8221; type<\/p>\n\n\n\n<p>To get the &#8220;<strong>flash<\/strong>&#8221; animation code<\/p>\n\n\n\n<p>Select<a href=\"https:\/\/github.com\/daneden\/animate.css\/blob\/master\/source\/\"> source<\/a> -> Select <a href=\"https:\/\/github.com\/daneden\/animate.css\/tree\/master\/source\/attention_seekers\">attention seekers<\/a> -> Select <a href=\"https:\/\/github.com\/daneden\/animate.css\/blob\/master\/source\/attention_seekers\/flash.css\">flash.css<\/a> file -> Open the file and copy the code, paste at Animation code block and change the Animation Class name to &#8220;<strong>flash<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_-_Customization_-flash.png\"><img decoding=\"async\" width=\"1262\" height=\"895\" src=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_-_Customization_-flash.png\" alt=\"Flash animation\" class=\"wp-image-883\" srcset=\"https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_-_Customization_-flash.png 1262w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_-_Customization_-flash-300x213.png 300w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_-_Customization_-flash-1024x726.png 1024w, https:\/\/holithemes.com\/plugins\/click\/wp-content\/uploads\/2018\/06\/Animations_-_Customization_-flash-768x545.png 768w\" sizes=\"(max-width: 1262px) 100vw, 1262px\" \/><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p>We concentrate mainly on high performance and less page size.<\/p>\n\n\n\n<p>Instead of adding 100kb+ file to load one Animation, this method will improve the performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animations for Floating Styles By Default Animation are not Enabled, To Enable the Animations,\u00a0 go to the plugin settings and check the Animation filled option. By Default &#8216;Bounce&#8216; type of Animations are added. To Change the Animation type to slideInDown flipInX swing tada fadeIn To Change the Animation Settings, Click -> Customize Styles &#8211; Animations\u00a0 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/holithemes.com\/plugins\/click\/animations\/\"> <span class=\"screen-reader-text\">Animations<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-725","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}