{"id":1061,"date":"2021-06-01T14:27:07","date_gmt":"2021-06-01T06:27:07","guid":{"rendered":"https:\/\/leadsleap.com\/blog\/?p=1061"},"modified":"2021-06-01T14:27:08","modified_gmt":"2021-06-01T06:27:08","slug":"animate-your-landing-pages","status":"publish","type":"post","link":"https:\/\/leadsleap.com\/blog\/animate-your-landing-pages\/","title":{"rendered":"Animate Your Landing Pages"},"content":{"rendered":"\n<p>We&#8217;ve just added a pretty cool feature to our Landing Page Builder &#8211; Animation.<\/p>\n\n\n\n<p>Why add animation?<\/p>\n\n\n\n<p>Because it makes your landing page stand out.<\/p>\n\n\n\n<p>You can now animate <strong><span style=\"text-decoration: underline;\"><em>any element<\/em><\/span><\/strong> in the landing page and produce cool pages like these:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"743\" height=\"669\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/1.gif\" alt=\"\" class=\"wp-image-1062\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"743\" height=\"193\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/5.gif\" alt=\"\" class=\"wp-image-1063\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"743\" height=\"243\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/4-1.gif\" alt=\"\" class=\"wp-image-1065\"\/><\/figure>\n\n\n\n<p>Or you can create a grand entrance like these:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"743\" height=\"669\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/3.gif\" alt=\"\" class=\"wp-image-1067\"\/><\/figure>\n\n\n\n<p>Or animate a video like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"916\" height=\"702\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/6.gif\" alt=\"\" class=\"wp-image-1068\"\/><\/figure>\n\n\n\n<p>Basically every element can be animated. <\/p>\n\n\n\n<p>You can even animate the input field if you want. But just make sure you don&#8217;t over do it.<\/p>\n\n\n\n<p>For special elements, such as video, button and input field, if you set them to animate infinitely, animation will stop on mouse over. This is to provide a better user experience.<\/p>\n\n\n\n<h2>How To Animate The Element?<\/h2>\n\n\n\n<p>It&#8217;s really simple. <\/p>\n\n\n\n<p>The animation setting can be found at the end of each element setting panel (see screenshot below).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"635\" height=\"737\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/Untitled-2.gif\" alt=\"\" class=\"wp-image-1070\"\/><\/figure>\n\n\n\n<p>You simply have to select <br>&#8211; animation type, <br>&#8211; speed, <br>&#8211; repeat pattern, and <br>&#8211; start delay.<\/p>\n\n\n\n<h2>21 Animation Types<\/h2>\n\n\n\n<p>There is a total of 21 animations you can choose from. <\/p>\n\n\n\n<p>14 of them are standard animations that are great for repetition; <\/p>\n\n\n\n<p>7 are entrance animations, i.e. the element will first be hidden on page load, followed by an animated entrance.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"454\" height=\"493\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/Untitled-1.gif\" alt=\"\" class=\"wp-image-1069\"\/><\/figure>\n\n\n\n<h2>Combine Animations Using Delay<\/h2>\n\n\n\n<p>You can get creative and combine different animations with delays, and produce an effect like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"737\" height=\"658\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2021\/06\/7.gif\" alt=\"\" class=\"wp-image-1071\"\/><\/figure>\n\n\n\n<p>Give it a try. Let me know what you think. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve just added a pretty cool feature to our Landing Page Builder &#8211; Animation. Why add animation? Because it makes your landing page stand out. You can now animate any element in the landing page and produce cool pages like these: Or you can create a grand entrance like these: Or animate a video like [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[],"_links":{"self":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1061"}],"collection":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/comments?post=1061"}],"version-history":[{"count":1,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1061\/revisions"}],"predecessor-version":[{"id":1072,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1061\/revisions\/1072"}],"wp:attachment":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/media?parent=1061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/categories?post=1061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/tags?post=1061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}