From e6141d691cfec0b5831e4385f8b9ce4480d28f1c Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 26 Mar 2013 20:21:52 -0400
Subject: [PATCH] small animation things.

---
 js/id/ui/preset_grid.js | 14 ++++++++------
 js/id/ui/splash.js      | 24 ++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 172e63a9a..cba25c1df 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -238,27 +238,29 @@ iD.ui.PresetGrid = function(context, entity) {
                 .append('div')
                 .attr('class','grid-button-wrap col4 grid-entry-wrap')
                 .classed('category', function(d) { return !!d.members; })
-                .classed('current', function(d) { return d === preset; })
-                .append('button')
+                .classed('current', function(d) { return d === preset; });
+
+            var buttonInner = entered.append('button')
                 .attr('class', 'grid-entry')
                 .on('click', choose);
 
-            entered.style('opacity', 0)
+            buttonInner
+                .style('opacity', 0)
                 .transition()
                 .style('opacity', 1);
 
-            entered.append('div')
+            buttonInner.append('div')
                 .attr('class', presetClass);
 
             var geometry = entity.geometry(context.graph()),
                 fallbackIcon = geometry === 'line' ? 'other-line' : 'marker-stroked';
 
-            entered.append('div')
+            buttonInner.append('div')
                 .attr('class', function(d) {
                     return 'feature-' + (d.icon || fallbackIcon) + ' icon';
                 });
 
-            var label = entered.append('div')
+            var label = buttonInner.append('div')
                 .attr('class','label')
                 .text(name);
 
diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js
index 7c96171ef..bb0e91f66 100644
--- a/js/id/ui/splash.js
+++ b/js/id/ui/splash.js
@@ -25,14 +25,34 @@ iD.ui.Splash = function(context) {
             .text(t('splash.walkthrough'))
             .on('click', function() {
                 d3.select(document.body).call(iD.ui.intro(context));
-                modal.remove();
+                modal
+                    .transition()
+                    .duration(200)
+                    .style('opacity','0')
+                    .remove();
+
+                modal.select('.modal')
+                    .transition()
+                    .duration(200)
+                    .style('top','0px')
+                    .remove();
             });
 
         buttons.append('button')
             .attr('class', 'col6 action modal-section start')
             .text(t('splash.start'))
             .on('click', function() {
-                modal.remove();
+                modal
+                    .transition()
+                    .duration(200)
+                    .style('opacity','0')
+                    .remove();
+
+                modal.select('.modal')
+                    .transition()
+                    .duration(200)
+                    .style('top','0px')
+                    .remove();
             });
 
         introModal.append('div')