Smooth layout animation of visuals

A computer system for providing automatic visual transitions for a declaratively defined user interface, the system comprising:

• a processor and memory configured to execute software instructions;
• a declarative input component configured to parse a declarative representation of a user interface including one or more visual elements;
• a visual layer manager configured to manage a displayed representation of the declarative representation, wherein the displayed representation includes one or more graphical controls that map to particular visual elements specified in the declarative representation;
• a data layer manager configured to manage one or more data items associated with the displayed representation;
• a tag identification component configured to identify a tag for at least one displayed visual element that relates the visual element to at least one data item;
• an item dictionary configured to store a table that maps identified tags to visual elements and stores position information about each visual element;
• and
• an animation component configured to provide animation as a data items move in a visual display based on a position change of a tagged item in the item dictionary.

A computer-readable storage medium comprising instructions for controlling a computer system to display a visual layout of a user interface, wherein the instructions, when executed, cause a processor to perform actions comprising:

• loading a declarative representation of a user interface and a data model from persistent storage;
• accessing one or more data items referenced by the declarative representation of the user interface;
• building a dictionary that tracks one or more visual elements of the user interface defined in the declarative representation and one or more positions of the visual elements;
• displaying the visual elements tracked by the dictionary in one or more initial positions, wherein the user interface includes controls for modifying the displayed layout based on user input;
• determining whether one or more displayed visual elements have changed;
• and
• upon determining that one or more displayed visual elements have changed, updating the displayed visual elements by comparing a new position of a visual element based on a tag associated with the visual element with any visual element in the dictionary that was similarly tagged to detect movement and providing an animated transition from the old position to the new position of the tagged item, even if the visual element representing the item has changed.