{"id":33,"date":"2024-01-29T11:21:36","date_gmt":"2024-01-29T11:21:36","guid":{"rendered":"https:\/\/akshatdeveloper.in\/extensions\/?p=33"},"modified":"2024-01-29T11:21:37","modified_gmt":"2024-01-29T11:21:37","slug":"animated-gradient","status":"publish","type":"post","link":"https:\/\/akshatdeveloper.in\/extensions\/free\/animated-gradient\/","title":{"rendered":"Animated Gradient"},"content":{"rendered":"\n<p>This extension helps you to add animated gradient effects to your app.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/c\/d\/cde21d0f14e455efd510e6c69bf1579e2917fee1.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>component:-<\/strong>&nbsp;Provide any component which is to be made with animated gradient<br><strong>orientation:-<\/strong>&nbsp;Provide which orientation is to be given (Already Included in the extension)<br><strong>startcolor:-<\/strong>&nbsp;Provide color at start.<br><strong>midcolor:-<\/strong>&nbsp;Provide color at Mid.<br><strong>endColor<\/strong>&nbsp;Provide color at End.<br><strong>duration:-<\/strong>&nbsp;Here duration means the speed of the animation (should be in millis).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/2\/0\/208fff34b2cd51216e54626755e1c433b57061fd.png\" alt=\"block1\"\/><\/figure>\n\n\n\n<p>Here is the usage<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/1\/c\/1c62caa5ff10191682dee8630ab0ddd674eebe2c.png\" alt=\"use1\"\/><\/figure>\n\n\n\n<p>Here comes the second block, which parses the hex color if you want hex color instead of inbuild color blocks<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/6\/b\/6b32cd580bee1d054f43f8b6a78baa769e04a993.png\" alt=\"block2\"\/><\/figure>\n\n\n\n<p>Heres the usage:-<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/a\/d\/ad36263c255df8ea7a960cddb63acb1d7d59c5e2.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/a\/d\/ad36263c255df8ea7a960cddb63acb1d7d59c5e2.png\" alt=\"use2\"\/><\/a><\/figure>\n\n\n\n<p><a href=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/a\/d\/ad36263c255df8ea7a960cddb63acb1d7d59c5e2.png\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Here\u2019s the third block, which will be used when an error occurs:-<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/f\/0\/f0b79069b7dded3f83d5de0966141b6761d9bf9a.png\" alt=\"block10\"\/><\/figure>\n\n\n\n<p>You are familiar with this block<\/p>\n\n\n\n<p>Here are the remaining orientation blocks:-<\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/c\/e\/ce84a6a7eb8cdd1d29b85061187bfcd711278a15.png\" alt=\"block3\" width=\"356\" height=\"26\"><\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/9\/a\/9a908f803931bc75e03bd22a1fdc2dd497b41213.png\" alt=\"block4\" width=\"356\" height=\"26\"><\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/b\/b\/bbc95b53ea217403fcd03549b3968b7d2d6d1a25.png\" alt=\"block5\" width=\"298\" height=\"26\"><\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/3\/8\/38e5e295199d3c7cb91a4ccd56f145469eb3fd92.png\" alt=\"block6\" width=\"286\" height=\"26\"><\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/d\/6\/d6e89ce15d1163edf25bc4e71ad06649a4ef51be.png\" alt=\"block7\" width=\"286\" height=\"26\"><\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/5\/0\/50147ed49e8582959e46159079a4e06b97694b0f.png\" alt=\"block8\" width=\"356\" height=\"26\"><\/p>\n\n\n\n<p>ORIENTATION:-<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/f\/2\/f2c64691d4757151174a002a371d3885fcf981c1.png\" alt=\"block9\" width=\"356\" height=\"26\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/community.kodular.io\/t\/free-v-2-1-added-animation-handler-blocks-animated-gradient-background-animated-your-background\/101770#added-v-2-3\" target=\"_blank\" rel=\"noopener\"><\/a>Added V-2:-<\/h2>\n\n\n\n<p>Designer Menu Items:-<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/4\/4\/44257b9b11e9b892cd1ff8deac6ca835e23fd49f.png\" alt=\"image\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/5\/3\/5344471f3767209cfd4ae23e11872aa2a1e6dd85.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Added Version &#8211; 2.1<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Pause Animation Block<\/li>\n\n\n\n<li>Resume Animation Block<\/li>\n\n\n\n<li>End Animation Block<\/li>\n\n\n\n<li>Start Animation Block<\/li>\n\n\n\n<li>Reverse Animation Block<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/e\/5\/e54e023781683e6e1da8ffb15d52a9293b8cb01f.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/kodular-community.s3.dualstack.eu-west-1.amazonaws.com\/original\/3X\/e\/5\/e54e023781683e6e1da8ffb15d52a9293b8cb01f.png\" alt=\"image\"\/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/drive.google.com\/file\/d\/1roOcS1Y4X7PQ4wp0WXPMYqZUG7BqFTG0\/view?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Download<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This extension helps you to add animated gradient effect to your app.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"site-sidebar-layout":"default","site-content-layout":"","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":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[6],"tags":[5,14,4,2,15],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-free","tag-akshat-developer-extensions","tag-animated-gradient","tag-extension","tag-free","tag-kodular"],"_links":{"self":[{"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/posts\/33"}],"collection":[{"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":2,"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/posts\/33\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/akshatdeveloper.in\/extensions\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}