Overview

The animations introduced in FM13 are great, but they still don’t let us animate the transition from one layout to another. This is something we’re looking for as it’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’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 – Go To Layout Animation

The video below demonstrates the animations and goes into how the scripts work. The whole thing is really pretty simple…

A couple notes for when you add this to your own files:

  • The script decides to animate “left” or “right” based on the order of your layouts in the layout list. If you’re going to a layout “before” the one your on, we slide left. Heading to one “after” your layout, we slide right.
  • This doesn’t work / apply in Web Direct since animations aren’t supported there.
  • The animations don’t fire when you navigate using the layout menu, though I imagine they could. (Anyone want to mod that?)
  • Objects placed on your “for-animation-only” panels don’t need to work. So while you’ll see we have navigation icons on these panels, that’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’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!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Tagged with →  

21 Responses to Best-Of: FileMaker 13 Animations — Go To Layout

  1. Mauricio says:

    Nice. Thank you for your time

  2. john says:

    nice presentation

  3. JP says:

    Excellent… thanks..

  4. Steve says:

    Nice presentation, although it does not apply to Windows versions either, since the panels are not animated.

  5. Oreste says:

    You have 4 panels and 4 layouts. If I have 100 layouts do I need 100 panels?

    • seedcode says:

      No (thankfully): each layout contains 4 panels no matter how many total layouts you have. One for going “left”, one for going “home”, one to actually enter data on, and one for going “right”.

  6. Mark Scott says:

    Very cool, indeed! Slide panels are turning out to be one of the most powerful and versatile UI enhancers that FileMaker has seen in a long time. Thanks for sharing this technique.

  7. Donovan says:

    Cool tips. And thank you for being so consistently succinct!

  8. macwombat says:

    Hi – looks very impressive and I love it. It seems to be a perfect solution to make an FM dbase on an iPad seem like a native app. So I copied the example file onto my iPad to try it out. Unfortunately the speed with which the animation occurs on the iPad (ten 4) is quite a bit slower than in FM Pro (mbp with ssd drive). I tried playing with the length of the delay on the on timer script which improves it a little bit, but the speed with which the iPad draws the new layout is still a bit slow to give a perfect result. Still, a great technique put to good use – great design sense. Thanks

  9. Jason Hawke says:

    I’m a bit confused by this.

    There are only 4 layouts, but each layout has 4 panels? Or do the 4 panels hold 3 similar layouts and the only one that is different is the data entry for each “named” layout? Meaning I could copy one completed set of panels and then just change the data entry portion? And how is it possible to have the data entry panel object name be the same for each layout? Don’t object names have to be unique?

    You state the buttons don’t have to “do anything” but they do if you’re not moving in sequential layout order. I have a lot of buttons in my solutions that state “go to layout x” and they aren’t in order but I assume I can still use this technique.

    Finally, is it possible to have the animation go UP and DOWN vs. Left and Right?

    Thanks!

    • seedcode says:

      > Meaning I could copy one completed set of panels and then just change the data entry portion?

      Right! =)

      > And how is it possible to have the data entry panel object name be the same for each layout? Don’t object names have to be unique?

      They only have to be unique on the same layout.

      The buttons on the 3 “non-data-entry” layouts don’t do anything because users only see those during animations: users are never “on” those panels.

      Finally, animations on slide panels only go left and right… though up and down would be cool. Thx for the comment.

      • Jason Hawke says:

        Thank you . . . that helps some. I forgot that GoToObject still requires a layout specified so . . .

        The first panel that always shows the “home” animation only then gets called if the script sends the user to the home panel? It’s really panels 2 and 4 that show the “sliding” action to arrive at panel 3?

    • seedcode says:

      You’re on the right track, but panel #2 is the one we use when going home, #1 when going “left”, and #4 when going right. #3 is the one where folks actually enter data. HTH.

  10. Jason Hawke says:

    I see . . . so panel one is a transition to ANY layout BEFORE the current layout. Panel 2 is transition to the home layout, so in order to work correctly, the home layout should always be the FIRST layout in the list. Panel 4 is always moving to the “next” layout, regardless of where it is as long as it’s not the “home” layout?

  11. Johnny says:

    thanks for this cool example. is it possible to make the menu with buttons fixed? So when click between the buttons it doesn’t slide along with the body.

    • seedcode says:

      I imagine you could the menu buttons exist outside the slide panel, instead of being contained by them. Then the tabs would stay in place as the panels slid. While the tab would be redrawn on the new layout it might appear as if it never moved. Though I wonder if it would look as good when the panel moved to the right. If you build one like that I’d be interested to see it. Thanks for the suggestion!

Leave a Reply

Your email address will not be published. Required fields are marked *

Share →
DOWNLOAD
DayBack Calendar
DayBack's 30-day trial is unlocked so you can customize it and integrate it with your files.
Download DayBack and we'll send you a couple short emails with tips on how to modify it and use some of the coolest features.
Thank you! Please download: DayBack Calendar
Need More?
SeedCode tips & example files in your inbox
Need More?
SeedCode tips & example files in your inbox
Want More?
Be the first to see articles and tips like these
DOWNLOAD
TimeZync
Download TimeZync and we'll send you a couple short emails with tips syncing your FileMaker Go files.
Thank you! Please download: TimeZync
Want More?
Be the first to see articles and tips like these