{"id":5328,"date":"2022-09-21T13:32:47","date_gmt":"2022-09-21T11:32:47","guid":{"rendered":"https:\/\/www.leslinq.com\/ufaq\/wat-is-initial-animation-en-hoe-werkt-het\/"},"modified":"2022-09-22T10:03:01","modified_gmt":"2022-09-22T08:03:01","slug":"what-is-initial-animation-and-how-does-it-work","status":"publish","type":"ufaq","link":"https:\/\/www.leslinq.com\/en\/enufaq\/what-is-initial-animation-and-how-does-it-work\/","title":{"rendered":"What is Initial Animation and how does it work?"},"content":{"rendered":"<div  class=\"ewd-ufaq-faq-list ewd-ufaq-page-type-distinct\" id='ewd-ufaq-faq-list'>\n\n\t<input type='hidden' name='show_on_load' value='' id='ewd-ufaq-show-on-load' \/>\n<input type='hidden' name='include_category' value='' id='ewd-ufaq-include-category' \/>\n<input type='hidden' name='exclude_category' value='' id='ewd-ufaq-exclude-category' \/>\n<input type='hidden' name='orderby' value='date' id='ewd-ufaq-orderby' \/>\n<input type='hidden' name='order' value='desc' id='ewd-ufaq-order' \/>\n<input type='hidden' name='post_count' value='-1' id='ewd-ufaq-post-count' \/>\n<input type='hidden' name='current_url' value='\/en\/wp-json\/wp\/v2\/ufaq\/5328' id='ewd-ufaq-current-url' \/>\n\t\n\t\n\t<div class='ewd-ufaq-faqs'>\n\n\t\t<div  class=\"ewd-ufaq-faq-div ewd-ufaq-faq-column-count-one ewd-ufaq-faq-responsive-columns- ewd-ufaq-faq-display-style-default ewd-ufaq-can-be-toggled\" id='ewd-ufaq-post-5328-j4mkRf5dVZ' data-post_id='5328'>\n\n\t<div class='ewd-ufaq-faq-title ewd-ufaq-faq-toggle'>\n\t\n\t<a class='ewd-ufaq-post-margin'  href='#' role=\"button\">\n\n\t\t<div class='ewd-ufaq-post-margin-symbol ewd-ufaq-'>\n\t\t\t<span >A<\/span>\n\t\t<\/div>\n\n\t\t<div class='ewd-ufaq-faq-title-text'>\n\n\t\t\t<h4>\n\t\t\t\tWhat is Initial Animation and how does it work?\t\t\t<\/h4>\n\n\t\t<\/div>\n\n\t\t<div class='ewd-ufaq-clear'><\/div>\n\n\t<\/a>\n\t\n<\/div>\n\t\n\t<div class='ewd-ufaq-faq-body ' >\n\n\t\t\n\t\t\t\n\t\t\n\t\t\t<div class='ewd-ufaq-post-margin ewd-ufaq-faq-post'>\n\t\n<p>For each element (image, button, shape, video, etc.) that you add to your canvas, you can control how it appears on screen. You set this via Initial Animation. The settings of Initial Animation can be found in the &#8216;Properties&#8217; of the element. You open the Properties by double clicking on the element in the canvas, or by selecting the element and clicking on the cogwheel icon in the lower left corner. The property panel will now open.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Scroll down to the Inital Animation Settings and select:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>None<\/li><li>Slide in Left<\/li><li>Slide Out Left<\/li><li>Slide in Right<\/li><li>Slide Out Right<\/li><li>Slide in Top<\/li><li>Slide Out Top<\/li><li>Slide in Bottom<\/li><li>Slide Out Bottom<\/li><li>Fade in<\/li><li>Fade Out<\/li><li>Zoom In<\/li><li>Zoom Out<\/li><li>Custom Fade<\/li><li>Custom Zoom<\/li><\/ul>\n\n\n\n<p><p>At &#8216;Duration&#8217;, set the duration of the animation<br \/>At &#8216;Delay&#8217; you determine at what time the animation starts<br \/>At &#8216;Ease&#8217; you determine the animation settings at the beginning or end of the animation. You can choose from:<\/p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>None<\/li><li>Ease on Start<\/li><li>Ease on End<\/li><li>Ease on Start and End<\/li><li>Back on Start<\/li><li>Back on End<\/li><li>Back on Start and End<\/li><\/ul>\n\n\n\n<p>In this way you can set the Inital Animation of each element separately.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"500\" height=\"1024\" src=\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg\" alt=\"\" class=\"wp-image-5319\" srcset=\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg 500w, https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-480x983.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 500px, 100vw\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\t\t\n\t\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\t<div class='ewd-ufaq-permalink'>\n\t\n\t<a href='https:\/\/www.leslinq.com\/en\/enufaq\/what-is-initial-animation-and-how-does-it-work\/'>\n\t\t\n\t\tPermalink\t\t\t\n\t<\/a>\n\n<\/div>\n\t\t\n\t\t\t\n\t\t\n\t\t\t\n\t\t\n\t<\/div>\n\n<\/div>\n\t<\/div>\n\n\t\n<\/div>","protected":false},"excerpt":{"rendered":"<p>A What is Initial Animation and how does it work? For each element (image, button, shape, video, etc.) that you add to your canvas, you can control how it appears on screen. You set this via Initial Animation. The settings of Initial Animation can be found in the &#8216;Properties&#8217; of the element. You open the [&hellip;]<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"closed","template":"","ufaq-category":[45],"ufaq-tag":[],"class_list":["post-5328","ufaq","type-ufaq","status-publish","hentry","ufaq-category-3animations"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Initial Animation and how does it work? | LesLinq<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Initial Animation and how does it work? | LesLinq\" \/>\n<meta property=\"og:description\" content=\"A What is Initial Animation and how does it work? For each element (image, button, shape, video, etc.) that you add to your canvas, you can control how it appears on screen. You set this via Initial Animation. The settings of Initial Animation can be found in the &#8216;Properties&#8217; of the element. You open the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/\" \/>\n<meta property=\"og:site_name\" content=\"LesLinq\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/leslinq\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-22T08:03:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@LinqLes\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/\",\"url\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/\",\"name\":\"What is Initial Animation and how does it work? | LesLinq\",\"isPartOf\":{\"@id\":\"https:\/\/www.leslinq.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg\",\"datePublished\":\"2022-09-21T11:32:47+00:00\",\"dateModified\":\"2022-09-22T08:03:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#primaryimage\",\"url\":\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg\",\"contentUrl\":\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.leslinq.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FAQs\",\"item\":\"https:\/\/www.leslinq.com\/enufaq\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is Initial Animation and how does it work?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.leslinq.com\/#website\",\"url\":\"https:\/\/www.leslinq.com\/\",\"name\":\"LesLinq\",\"description\":\"Sparkling content for high impact\",\"publisher\":{\"@id\":\"https:\/\/www.leslinq.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.leslinq.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.leslinq.com\/#organization\",\"name\":\"LesLinq\",\"url\":\"https:\/\/www.leslinq.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.leslinq.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2023\/05\/LesLinq-696px.png\",\"contentUrl\":\"https:\/\/www.leslinq.com\/wp-content\/uploads\/2023\/05\/LesLinq-696px.png\",\"width\":696,\"height\":696,\"caption\":\"LesLinq\"},\"image\":{\"@id\":\"https:\/\/www.leslinq.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/leslinq\",\"https:\/\/x.com\/LinqLes\",\"https:\/\/www.linkedin.com\/company\/leslinq\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Initial Animation and how does it work? | LesLinq","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/","og_locale":"en_US","og_type":"article","og_title":"What is Initial Animation and how does it work? | LesLinq","og_description":"A What is Initial Animation and how does it work? For each element (image, button, shape, video, etc.) that you add to your canvas, you can control how it appears on screen. You set this via Initial Animation. The settings of Initial Animation can be found in the &#8216;Properties&#8217; of the element. You open the [&hellip;]","og_url":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/","og_site_name":"LesLinq","article_publisher":"https:\/\/www.facebook.com\/leslinq","article_modified_time":"2022-09-22T08:03:01+00:00","og_image":[{"url":"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@LinqLes","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/","url":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/","name":"What is Initial Animation and how does it work? | LesLinq","isPartOf":{"@id":"https:\/\/www.leslinq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#primaryimage"},"image":{"@id":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#primaryimage"},"thumbnailUrl":"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg","datePublished":"2022-09-21T11:32:47+00:00","dateModified":"2022-09-22T08:03:01+00:00","breadcrumb":{"@id":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#primaryimage","url":"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg","contentUrl":"https:\/\/www.leslinq.com\/wp-content\/uploads\/2022\/09\/Initial-animation-500x1024.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.leslinq.com\/enufaq\/what-is-initial-animation-and-how-does-it-work\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.leslinq.com\/"},{"@type":"ListItem","position":2,"name":"FAQs","item":"https:\/\/www.leslinq.com\/enufaq\/"},{"@type":"ListItem","position":3,"name":"What is Initial Animation and how does it work?"}]},{"@type":"WebSite","@id":"https:\/\/www.leslinq.com\/#website","url":"https:\/\/www.leslinq.com\/","name":"LesLinq","description":"Sparkling content for high impact","publisher":{"@id":"https:\/\/www.leslinq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.leslinq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.leslinq.com\/#organization","name":"LesLinq","url":"https:\/\/www.leslinq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leslinq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.leslinq.com\/wp-content\/uploads\/2023\/05\/LesLinq-696px.png","contentUrl":"https:\/\/www.leslinq.com\/wp-content\/uploads\/2023\/05\/LesLinq-696px.png","width":696,"height":696,"caption":"LesLinq"},"image":{"@id":"https:\/\/www.leslinq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/leslinq","https:\/\/x.com\/LinqLes","https:\/\/www.linkedin.com\/company\/leslinq\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/ufaq\/5328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/ufaq"}],"about":[{"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/types\/ufaq"}],"author":[{"embeddable":true,"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/comments?post=5328"}],"wp:attachment":[{"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/media?parent=5328"}],"wp:term":[{"taxonomy":"ufaq-category","embeddable":true,"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/ufaq-category?post=5328"},{"taxonomy":"ufaq-tag","embeddable":true,"href":"https:\/\/www.leslinq.com\/en\/wp-json\/wp\/v2\/ufaq-tag?post=5328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}