{"id":6506,"date":"2014-02-04T05:02:46","date_gmt":"2014-02-04T13:02:46","guid":{"rendered":"http:\/\/www.seedcode.com\/?p=6506"},"modified":"2014-02-04T05:02:46","modified_gmt":"2014-02-04T13:02:46","slug":"go-to-layout-animation","status":"publish","type":"post","link":"https:\/\/seedcode.com\/go-to-layout-animation\/","title":{"rendered":"Best-Of: FileMaker 13 Animations &#8212; Go To Layout"},"content":{"rendered":"<h2>Overview<\/h2>\n<div class=\"lightbox\">\n<figure id=\"attachment_6520\" aria-describedby=\"caption-attachment-6520\" style=\"width: 300px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.seedcode.com\/wp-content\/uploads\/2014\/02\/examplefile.png\"><img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/www.seedcode.com\/wp-content\/uploads\/2014\/02\/examplefile-300x214.png\" alt=\"Go to Layout Animation - Example File\" width=\"300\" height=\"214\" class=\"size-medium wp-image-6520\" \/><\/a><figcaption id=\"caption-attachment-6520\" class=\"wp-caption-text\">Example file (link below)<\/figcaption><\/figure>\n<\/div>\n<p>The animations introduced in FM13 are great, but they still don&#8217;t let us animate the transition from one layout to another. This is something we&#8217;re looking for as it&#8217;s often used in iOS apps to move from list to detail and back again.<\/p>\n<p>However, using full-layout slide panels, we can animate layout transitions as long as we&#8217;re careful to get the timings right. Our unlocked example file demonstrates how to do this in your own solutions and introduces using OnTimer triggers to queue animations that might otherwise be invisible within a single script.<\/p>\n<p><em>Be sure to check out Part 1 of this article, showing how to make animated buttons, <a title=\"Best-Of: FileMaker 13 Animations\" href=\"http:\/\/www.seedcode.com\/filemaker-13-animations\/\">here<\/a>.<\/em><\/p>\n<h2>FileMaker 13 &#8211; Go To Layout Animation<\/h2>\n<p>The video below demonstrates the animations and goes into how the scripts work. The whole thing is really pretty simple&#8230;<\/p>\n<p>[ba-youtubeflex videoid=&#8221;oXQKKNCJOhw&#8221;]<\/p>\n<p>A couple notes for when you add this to your own files:<\/p>\n<ul>\n<li>The script decides to animate &#8220;left&#8221; or &#8220;right&#8221; based on the order of your layouts in the layout list. If you&#8217;re going to a layout &#8220;before&#8221; the one your on, we slide left. Heading to one &#8220;after&#8221; your layout, we slide right.<\/li>\n<\/ul>\n<ul>\n<li>This doesn&#8217;t work \/ apply in Web Direct since animations aren&#8217;t supported there.<\/li>\n<\/ul>\n<ul>\n<li>The animations don&#8217;t fire when you navigate using the layout menu, though I imagine they could. <em>(Anyone want to mod that?)<\/em><\/li>\n<\/ul>\n<ul>\n<li>Objects placed on your &#8220;for-animation-only&#8221; panels don&#8217;t need to work. So while you&#8217;ll see we have navigation icons on these panels, that&#8217;s only because users see them during the animations. Users never interact with these panels.<\/li>\n<\/ul>\n<ul>\n<li>Finally, each layout also has an On Layout Enter script trigger: don&#8217;t forget those when you add this to your file.<\/li>\n<\/ul>\n<p>Download the unlocked example file here: <a href=\"\/?wpdmdl=22\"><span class=\"icon-download\"><\/span> LayoutAnimations.fmp12<\/a><\/p>\n<p>More <a href=\"\/tag\/filemaker-13\/\">Best-Of FileMaker 13<\/a> articles.<\/p>\n<p>Enjoy!<\/p>\n<p><!--more--><\/p>\n<p>[ba-box background=&#8221;#778899&#8243; border=&#8221;#708090&#8243; textcolor=&#8221;#F7F7F7&#8243;][jetpack_subscription_form][\/ba-box]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview The animations introduced in FM13 are great, but they still don&#8217;t let us animate the transition from one layout to another. This is something we&#8217;re looking for as it&#8217;s often used in iOS apps to move from list to detail and back again. However, using full-layout slide panels, we can animate layout transitions as long as we&#8217;re careful to get the timings right. Our unlocked example file demonstrates how to do this in your own solutions and introduces using OnTimer triggers to queue animations that might otherwise be invisible within a single script. Be sure to check out Part 1 of this article, showing how to make animated buttons, here. FileMaker 13 &#8211; Go To Layout Animation The video below demonstrates the animations and goes into how the scripts work. The whole thing is really pretty simple&#8230; [ba-youtubeflex videoid=&#8221;oXQKKNCJOhw&#8221;] A couple notes for when you add this to your own files: The script decides to animate &#8220;left&#8221; or &#8220;right&#8221; based on the order of your layouts in the layout list. If you&#8217;re going to a layout &#8220;before&#8221; the one your on, we slide left. Heading to one &#8220;after&#8221; your layout, we slide right. This doesn&#8217;t work \/ apply in Web Direct since animations aren&#8217;t supported there. The animations don&#8217;t fire when you navigate using the layout menu, though I imagine they could. (Anyone want to mod that?) Objects placed on your &#8220;for-animation-only&#8221; panels don&#8217;t need to work. So while you&#8217;ll see we have navigation icons on these panels, that&#8217;s only because users see them during the animations. Users never interact with these panels. Finally, each layout also has an On Layout Enter script trigger: don&#8217;t forget those when you add this to your file. Download the unlocked example file here: LayoutAnimations.fmp12 More Best-Of FileMaker 13 articles. Enjoy!<\/p>\n","protected":false},"author":1,"featured_media":6510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7],"class_list":["post-6506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-filemaker-13"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Go to Layout: Animation in FileMaker 13 - SeedCode<\/title>\n<meta name=\"description\" content=\"The animations introduced in FM13 still don&#039;t let do Go To Layout animation. This unlocked example file shows you how to animate this in your own file.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seedcode.com\/go-to-layout-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Go to Layout: Animation in FileMaker 13 - SeedCode\" \/>\n<meta property=\"og:description\" content=\"The animations introduced in FM13 still don&#039;t let do Go To Layout animation. This unlocked example file shows you how to animate this in your own file.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seedcode.com\/go-to-layout-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"SeedCode\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/seedcoder\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-04T13:02:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png\" \/>\n\t<meta property=\"og:image:width\" content=\"109\" \/>\n\t<meta property=\"og:image:height\" content=\"110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"seedcode\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dayback\" \/>\n<meta name=\"twitter:site\" content=\"@dayback\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"seedcode\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/\"},\"author\":{\"name\":\"seedcode\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/af42f3f8cbfc8652fb0ffbb3f46f260f\"},\"headline\":\"Best-Of: FileMaker 13 Animations &#8212; Go To Layout\",\"datePublished\":\"2014-02-04T13:02:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/\"},\"wordCount\":337,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png\",\"keywords\":[\"FileMaker 13\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/seedcode.com\/go-to-layout-animation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/\",\"url\":\"https:\/\/seedcode.com\/go-to-layout-animation\/\",\"name\":\"Go to Layout: Animation in FileMaker 13 - SeedCode\",\"isPartOf\":{\"@id\":\"https:\/\/seedcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png\",\"datePublished\":\"2014-02-04T13:02:46+00:00\",\"description\":\"The animations introduced in FM13 still don't let do Go To Layout animation. This unlocked example file shows you how to animate this in your own file.\",\"breadcrumb\":{\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/seedcode.com\/go-to-layout-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png\",\"width\":109,\"height\":110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/seedcode.com\/go-to-layout-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/seedcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best-Of: FileMaker 13 Animations &#8212; Go To Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/seedcode.com\/#website\",\"url\":\"https:\/\/seedcode.com\/\",\"name\":\"SeedCode\",\"description\":\"Build the Software You&#039;ve Always Wanted\",\"publisher\":{\"@id\":\"https:\/\/seedcode.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/seedcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/seedcode.com\/#organization\",\"name\":\"SeedCode\",\"url\":\"https:\/\/seedcode.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"contentUrl\":\"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png\",\"width\":595,\"height\":189,\"caption\":\"SeedCode\"},\"image\":{\"@id\":\"https:\/\/seedcode.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/seedcoder\",\"https:\/\/x.com\/dayback\",\"https:\/\/www.linkedin.com\/company\/seedcode\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/af42f3f8cbfc8652fb0ffbb3f46f260f\",\"name\":\"seedcode\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/seedcode.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f0c386c5b845ee7fe111b36b2d87e983811f1f549682de9597a934b9dfd45469?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f0c386c5b845ee7fe111b36b2d87e983811f1f549682de9597a934b9dfd45469?s=96&d=mm&r=g\",\"caption\":\"seedcode\"},\"sameAs\":[\"https:\/\/seedcode.com\"],\"url\":\"https:\/\/seedcode.com\/author\/seedcode\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Go to Layout: Animation in FileMaker 13 - SeedCode","description":"The animations introduced in FM13 still don't let do Go To Layout animation. This unlocked example file shows you how to animate this in your own file.","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:\/\/seedcode.com\/go-to-layout-animation\/","og_locale":"en_US","og_type":"article","og_title":"Go to Layout: Animation in FileMaker 13 - SeedCode","og_description":"The animations introduced in FM13 still don't let do Go To Layout animation. This unlocked example file shows you how to animate this in your own file.","og_url":"https:\/\/seedcode.com\/go-to-layout-animation\/","og_site_name":"SeedCode","article_publisher":"https:\/\/www.facebook.com\/seedcoder","article_published_time":"2014-02-04T13:02:46+00:00","og_image":[{"width":109,"height":110,"url":"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png","type":"image\/png"}],"author":"seedcode","twitter_card":"summary_large_image","twitter_creator":"@dayback","twitter_site":"@dayback","twitter_misc":{"Written by":"seedcode","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#article","isPartOf":{"@id":"https:\/\/seedcode.com\/go-to-layout-animation\/"},"author":{"name":"seedcode","@id":"https:\/\/seedcode.com\/#\/schema\/person\/af42f3f8cbfc8652fb0ffbb3f46f260f"},"headline":"Best-Of: FileMaker 13 Animations &#8212; Go To Layout","datePublished":"2014-02-04T13:02:46+00:00","mainEntityOfPage":{"@id":"https:\/\/seedcode.com\/go-to-layout-animation\/"},"wordCount":337,"commentCount":21,"publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"image":{"@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png","keywords":["FileMaker 13"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seedcode.com\/go-to-layout-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seedcode.com\/go-to-layout-animation\/","url":"https:\/\/seedcode.com\/go-to-layout-animation\/","name":"Go to Layout: Animation in FileMaker 13 - SeedCode","isPartOf":{"@id":"https:\/\/seedcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage"},"image":{"@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png","datePublished":"2014-02-04T13:02:46+00:00","description":"The animations introduced in FM13 still don't let do Go To Layout animation. This unlocked example file shows you how to animate this in your own file.","breadcrumb":{"@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seedcode.com\/go-to-layout-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#primaryimage","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2014\/02\/GoToLayout.png","width":109,"height":110},{"@type":"BreadcrumbList","@id":"https:\/\/seedcode.com\/go-to-layout-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seedcode.com\/"},{"@type":"ListItem","position":2,"name":"Best-Of: FileMaker 13 Animations &#8212; Go To Layout"}]},{"@type":"WebSite","@id":"https:\/\/seedcode.com\/#website","url":"https:\/\/seedcode.com\/","name":"SeedCode","description":"Build the Software You&#039;ve Always Wanted","publisher":{"@id":"https:\/\/seedcode.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seedcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/seedcode.com\/#organization","name":"SeedCode","url":"https:\/\/seedcode.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/","url":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","contentUrl":"https:\/\/seedcode.com\/wp-content\/uploads\/2022\/12\/SeedCodeLogo.png","width":595,"height":189,"caption":"SeedCode"},"image":{"@id":"https:\/\/seedcode.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/seedcoder","https:\/\/x.com\/dayback","https:\/\/www.linkedin.com\/company\/seedcode\/"]},{"@type":"Person","@id":"https:\/\/seedcode.com\/#\/schema\/person\/af42f3f8cbfc8652fb0ffbb3f46f260f","name":"seedcode","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seedcode.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f0c386c5b845ee7fe111b36b2d87e983811f1f549682de9597a934b9dfd45469?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f0c386c5b845ee7fe111b36b2d87e983811f1f549682de9597a934b9dfd45469?s=96&d=mm&r=g","caption":"seedcode"},"sameAs":["https:\/\/seedcode.com"],"url":"https:\/\/seedcode.com\/author\/seedcode\/"}]}},"_links":{"self":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/6506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/comments?post=6506"}],"version-history":[{"count":0,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/posts\/6506\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media\/6510"}],"wp:attachment":[{"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/media?parent=6506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/categories?post=6506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seedcode.com\/wp-json\/wp\/v2\/tags?post=6506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}