{"id":2415,"date":"2016-01-06T20:02:33","date_gmt":"2016-01-06T20:02:33","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=2415"},"modified":"2016-01-06T20:26:07","modified_gmt":"2016-01-06T20:26:07","slug":"snowball-surprise-shaking-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/snowball-surprise-shaking-email\/","title":{"rendered":"Snowball Surprise: Shaking the Email"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-surprise.jpg\" alt=\"snowball-surprise\" width=\"450\" class=\"aligncenter size-full wp-image-2643\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-surprise.jpg 600w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-surprise-300x209.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><BR><BR><\/p>\n<p>Animated gifs in email are popular, so how do you let the recipient know that the cool CSS effect you&#8217;re using is not just another gif? Simple&#8230; animate the entire email!<\/p>\n<p>I received a few compliments on the newsletter I sent earlier last month (the second anniversary of the FreshInbox blog &#8211;yay!) and I thought I&#8217;d explain a few concepts behind it on this post. It starts with snow lightly falling across an idyllic image of a house and suddenly&#8230; BAM! A snowball lands right in front of the email and causes the email to &#8220;shake&#8221;.<\/p>\n<p>As usual, only email clients that <a href=\"https:\/\/freshinbox.com\/blog\/css-animations-in-email-and-vendor-prefixes\/\">support animations<\/a> can view this effect. <\/p>\n<p>You can <a href=\"https:\/\/litmus.com\/builder\/ee2600b\">view the email here<\/a>.<BR><BR><\/p>\n<h4>How its done<\/h4>\n<p><b>Dropping the snowball<\/b><\/p>\n<p>First, create two snowballs. One round one, and another on the ground:<\/p>\n<table width=400 style=\"width:400px;\">\n<tr>\n<td>\n<img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-round.png\" alt=\"snowball-round\" width=\"150\" class=\"aligncenter size-full wp-image-2650\" style=\"display:inline-block\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-round.png 400w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-round-150x150.png 150w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-round-300x300.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/td>\n<td>\n<img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-ground.png\" alt=\"snowball-ground\" width=\"150\" class=\"aligncenter size-full wp-image-2649\" style=\"display:inline-block\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-ground.png 400w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2015\/12\/snowball-ground-292x300.png 292w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/td>\n<\/tr>\n<\/table>\n<p><BR><\/p>\n<p>Have both snowballs initially hidden by positioning them off the body of the email. Then after a brief delay, dropping the first one from the top. Note since the initial position of the snowball is -500px, a translateY of 700px will place it at 200px vertically from the top.<BR><BR><\/p>\n<pre class=\"lang:default decode:true \" >\r\n.snowball{\r\n    position:absolute;\r\n    top:-500px;\r\n    -webkit-animation: dropsnowball 0.5s 1.5s linear; \r\n}\r\n@-webkit-keyframes dropsnowball {\r\n  0% {-webkit-transform: translateY(0px);}  \r\n  100% {-webkit-transform: translateY(700px);}\r\n}  \r\n<\/pre>\n<p><BR> <\/p>\n<p>Once the snowball drops, switch to the second snowball and then let it fade away.<\/p>\n<pre class=\"lang:default decode:true \" >.snowball2{\r\n    position:absolute;\r\n    top:-500px;\r\n    -webkit-animation: showandfade 3s 2s linear; \r\n}\r\n@-webkit-keyframes showandfade{\r\n  0% {opacity:1;top:210px;}  \r\n  90% {opacity:1;top:210px;}  \r\n  100% {opacity:0;top:210px;}  \r\n}<\/pre>\n<p><BR> <\/p>\n<p><b>Shaking the email.<\/b><\/p>\n<p>This is the fun part, and its quite easy. You wrap the email with a container div and set it to position: relative, then you just use translate transforms to &#8220;shake&#8221; it.<\/p>\n<pre class=\"lang:default decode:true \" >.container{\r\n  position:relative;\r\n  -webkit-animation: shake 0.5s 2s ease; \r\n}\r\n@-webkit-keyframes shake\r\n{\r\n  0% {-webkit-transform: translateY(0px);}  \r\n  20% {-webkit-transform: translateY(30px);}\r\n  40% {-webkit-transform: translateY(-20px);}\r\n  60% {-webkit-transform: translateY(10px);}\r\n  80% {-webkit-transform: translateY(-5px);}\r\n  100% {-webkit-transform: translateY(0px);}\r\n}  <\/pre>\n<p><BR><BR><\/p>\n<h4>Gimmick?<\/h4>\n<p>Now this is not something you want to use frequently as it can get tiring really quick &#8212; but for the right campaign, it can certainly add to the user &#8220;experience&#8221;. <\/p>\n<p><BR><BR><BR><\/p>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div>\n<p><img decoding=\"async\" class=\"snoball\" width=1 src=\"https:\/\/freshinbox.com\/images\/ext\/holidays2015\/snowball-round.png\"><br \/>\n<img decoding=\"async\" class=\"snoball2\" width=1 src=\"https:\/\/freshinbox.com\/images\/ext\/holidays2015\/snowball-ground.png\"><\/p>\n<style>\nbody{\n    overflow:auto;\n    width:100%;\n}\nbody{\n  position:relative;\n  -webkit-animation: shake 0.5s 2s ease;\n  animation: shake 0.5s 2s ease;\n}\n@-webkit-keyframes shake\n  {\n    0% {-webkit-transform: translateY(0px);}  \n    20% {-webkit-transform: translateY(30px);}\n    40% {-webkit-transform: translateY(-20px);}\n    60% {-webkit-transform: translateY(10px);}\n    80% {-webkit-transform: translateY(-5px);}\n    100% {-webkit-transform: translateY(0px);}\n}  \n@keyframes shake\n  {\n    0% {transform: translateY(0px);}  \n    20% {transform: translateY(30px);}\n    40% {transform: translateY(-20px);}\n    60% {transform: translateY(10px);}\n    80% {transform: translateY(-5px);}\n    100% {transform: translateY(0px);}\n}  \n.snoball{\n    position:absolute;\n    width:250px;\n    top:-500px;\n    margin:0px auto;\n    margin-left:-125px;\n    left:50%; \n    -webkit-animation: dropsno1 0.5s 1.5s linear; \n    animation: dropsno1 0.5s 1.5s linear; \n}\n.snoball2{\n    position:absolute;\n    opacity:1;\n    width:260px;\n    top:-500px;\n    margin:0px auto;\n    margin-left:-120px;\n    left:50%; \n    -webkit-animation: snowshow 3s 2s linear; \n    animation: snowshow 3s 2s linear; \n  }\n  @-webkit-keyframes snowshow\n  {\n    0% {opacity:1;top:210px;}  \n    90% {opacity:1;top:210px;}  \n    100% {opacity:0;top:210px;}  \n  }  \n  @-webkit-keyframes dropsno1\n  {\n    0% {-webkit-transform: translateY(0px);}  \n    100% {-webkit-transform: translateY(700px);}\n  }  \n  @keyframes snowshow\n  {\n    0% {opacity:1;top:210px;}  \n    90% {opacity:1;top:210px;}  \n    100% {opacity:0;top:210px;}  \n  }  \n  @keyframes dropsno1\n  {\n    0% {transform: translateY(0px);}  \n    100% {transform: translateY(700px);}\n  }  \n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Animated gifs in email are popular, so how do you let the recipient know that the cool CSS effect you&#8217;re using is not just another gif? Simple&#8230; animate the entire email!<\/p>\n","protected":false},"author":2,"featured_media":2672,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24,25,47],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2415"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=2415"}],"version-history":[{"count":34,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2415\/revisions"}],"predecessor-version":[{"id":2680,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/2415\/revisions\/2680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/2672"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=2415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=2415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=2415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}