<\/strong><\/li>
<\/li>
<\/li>
Therefore, if you want to gamify an email<\/a>, you need more than expertise. You need experience, intuition, and a competent team. Our Thanksgiving<\/a> game features Oliver and his cat, Whiskers, who is missing. As Oliver, you need to find the right kitchen cupboard to get a turkey and use it to lure Whiskers back so you can celebrate Thanksgiving together. <\/p>\n\n\n\n We recommend that you play the game<\/a> yourself first. <\/p>\n\n\n\n Before diving into how we built the game, let\u2019s first review the key CSS properties used to manage visuals, presentations, and animations. These are:<\/p>\n\n\n\n Let\u2019s understand each of these in some detail. <\/p>\n\n\n\n The opacity property manages an element’s transparency. <\/p>\n\n\n\n Set to opacity: 0;<\/strong>, the element becomes fully invisible while remaining part of the layout and interactive. <\/p>\n\n\n\n This property is particularly useful for creating fade effects.<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n The visibility property hides an element without removing it from the layout.<\/p>\n\n\n\n When set to visibility: hidden;<\/strong>, the element becomes invisible and non-interactive but continues to occupy space. Keyframes enable you to define the intermediate stages of an animation, specifying the start, middle, and end states. <\/p>\n\n\n\n This allows for smooth transitions of properties such as opacity.<\/p>\n\n\n\n <\/p>\n\n\n\n Labels in HTML interactive emails are essential for boosting engagement. <\/p>\n\n\n\n Often paired with form elements like checkboxes, radio buttons, and input fields, they facilitate actions such as toggling content visibility, revealing hidden sections, or enabling in-email navigation. By linking a label\u2019s for <\/strong>attribute to the corresponding form element\u2019s id<\/strong>, labels become clickable, enhancing accessibility and interactivity. When used creatively, labels can create dynamic email layouts, including collapsible menus, content revealers, and surveys\u2014all without relying on external scripts, ensuring broad compatibility across email clients.<\/p>\n\n\n\n Let\u2019s now understand the entire game in detail.<\/p>\n\n\n\n Here\u2019s the preview of our Thanksgiving game. <\/p>\n\n\n\n 4. Redirection: We assigned the label name em_help<\/strong> to define the interactive area for the click event. The label is associated with an input<\/strong> element (checkbox or radio) via the for <\/strong>attribute and wraps a clickable image. The image serves as a visually engaging call-to-action (CTA) element, styled with properties like width, height, and alt text to ensure accessibility and responsiveness. <\/p>\n\n\n\n When the label is clicked, it toggles the hidden input<\/strong> element with the ID em_help<\/strong>, which can be further styled or linked using CSS rules or HTML logic to perform a redirection or trigger an action to the second page. This approach combines functionality, interactivity, and visual appeal to create an intuitive user experience.<\/p>\n\n\n\n <\/p>\n\n\n <\/p>\n\n\n\n When the label is checked, Frame 2 becomes visible with a smooth and dynamic animation. This animation sequence first reveals Whisker (the cat) and Oliver (the boy), followed by the appearance of the second frame pop-up after a 1-second delay. The keyframe animation slide-in-elliptic-top-fwd<\/strong> is responsible for this effect. Initially, the element starts off-screen, positioned at translateY(-600px)<\/strong>, with a rotation on the X-axis and scaled down to 0. This creates an effect of the element “flying in” from the top while rotating slightly. As the animation progresses, the element smoothly moves to its final position (translateY(0)<\/strong>) with no rotation or scaling, gradually becoming fully visible with an opacity transition from 0 to 1.<\/p>\n\n\n\n The animation has a 1-second delay (animation-delay: 1s<\/strong>), ensuring that the content appears after the label is checked, allowing for a smooth, timed transition. The use of visibility: visible<\/strong> and opacity: 1<\/strong> makes the element fully appear on screen, while visibility: hidden<\/strong> ensures it is not displayed before the animation starts. This creates a visually engaging and polished effect that enhances the user experience by allowing content to appear in a coordinated and aesthetically pleasing way.<\/p>\n\n\n\n After the second frame appears, clicking a button triggers the redirection to the third frame. The 3rd frame will fade in using the fade-in<\/strong> keyframe animation, remain visible for a few seconds, and then fade out using the fade-out<\/strong> keyframe animation, smoothly transitioning to the 4th frame. This sequence is activated when the associated label is checked, triggering the animations.<\/p>\n\n\n\n The fade-in<\/strong> keyframe animation gradually increases the opacity of the third frame, making it visible, while the fade-out<\/strong> keyframe animation decreases the opacity, causing the frame to disappear. <\/p>\n\n\n\n <\/p>\n\n\n\n In the kitchen scene, a cupboard and two interactive buttons are presented. When a user clicks a button, the cupboard opens to reveal different items based on the selection. Clicking the left button reveals a turkey inside the cupboard, while the right button displays a dog. This interactive element adds dynamism, allowing the user\u2019s choice to influence the outcome.<\/p>\n\n\n\n Once the item (turkey or dog) is revealed, the scene transitions smoothly to the next frame, continuing the gamified flow<\/a>. The timed transition ensures the content progresses seamlessly after a brief interaction, enhancing the overall user experience.<\/p>\n\n\n\n <\/p>\n\n\n\n
Gamification being one of our strong suits, our developers know what exactly goes into creating fully-functioning games for email. In this guide, we show how we built our latest Thanksgiving game for our subscribers. Let\u2019s go!<\/p>\n\n\n\nHow the Thanksgiving Game Works<\/strong><\/h2>\n\n\n\n
1. Opacity<\/strong><\/h3>\n\n\n\n
.transparent-element {\nopacity: 0; \/* Element is invisible but still clickable *\/\n}\n<\/code><\/pre><\/div><\/div>\n\n\n\n2. Visibility<\/strong><\/h3>\n\n\n\n
<\/p>\n\n\n\n.hidden-element {\nvisibility: hidden; \/* Element is hidden and non-interactable *\/\n}\n<\/code><\/pre><\/div><\/div>\n\n\n\n3. Keyframes<\/strong><\/h3>\n\n\n\n
\/* Define the fade-in animation *\/\n@keyframes fade-in02 {\n 0% {\n opacity: 0; \/* Fully transparent *\/\n visibility: hidden; \/* Hidden from layout *\/\n}\n 100% {\n opacity: 1; \/* Fully visible *\/\n visibility: visible; \/* Visible in layout *\/<\/code><\/pre><\/div><\/div>\n\n\n\n4. Labels<\/strong><\/h3>\n\n\n\n
<! - - Checkbox to toggle visibility (invisible) - - >\n<input type= \u201ccheckbox\u201d id=\u201cshowContent\u201d style=\u201cdisplay:none;\u201d>\n<! - - Label that triggers the checkbox - - >\n<label for=\u201cshowContent\u201d>Click here to reveal hidden content in table<\/label><\/code><\/pre><\/div><\/div>\n\n\n\nDiving into the Nitty-gritty!<\/strong><\/h2>\n\n\n\n
![\"\"\/](\"http:\/\/edmimages.net\/edm\/2018-LiveImages-EDM\/blog\/resources\/uploads\/upload_images\/do_not_delete_files\/image3.gif\")
<\/figure><\/div>\n\n\n\nLabels and Page Transitions<\/strong><\/h2>\n\n\n\n
<\/strong>The checkbox <input type=”checkbox” id=”redirect-checkbox”><\/strong> is hidden using display: none;<\/strong>. It serves as the trigger for the transition.
<\/li>
<\/strong>The <label for=”redirect-checkbox”><\/strong> is styled to resemble a button. Clicking the label toggles the hidden checkbox.
<\/li>
<\/strong>
<\/strong>The user clicks the label to reveal the link, and clicking the link redirects them to the next page.<\/p>\n\n\n\n<form>\n <input type=\"checkbox\" name=\"Help Oliver\" id=\"em_help\" style=\"display:none;\" \/>\n <input type=\"checkbox\" name=\"Game Story\" id=\"em_enter\" style=\"display:none;\" \/>\n <input type=\"checkbox\" name=\"living\" id=\"em_living_room\" style=\"display:none;\" \/>\n <input type=\"radio\" name=\"turkey\" id=\"em_click_turkey\" style=\"display:none;\" \/>\n <input type=\"checkbox\" name=\"kitchen\" id=\"em_back_kitchen\" style=\"display:none;\" \/>\n <input type=\"radio\" name=\"door\" id=\"em_left_door\" style=\"display:none;\">\n <input type=\"radio\" name=\"door\" id=\"em_right_door\" style=\"display:none;\">\n <input type=\"checkbox\" name=\"room\" id=\"em_back_living_room\" style=\"display:none;\" \/>\n <input type=\"reset\" name=\"reset\" id=\"reset\" style=\"display:none;\" \/><\/code><\/pre><\/div><\/div>\n\n\n\n<\/h2>\n\n\n\n
Frame 1<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image1-5.png\")
<\/figure><\/div>\n\n\n\n<\/h2>\n\n\n\n
<\/h2>\n\n\n\n
<tr>\n <td align=\"center\" valign=\"top\" class=\"em_f1_ctaimg01\">\n <label for=\"em_help\">\n <img \n src=\"https:\/\/2700725.fs1.hubspotusercontent-na1.net\/hubfs\/2700725\/Thanksgiving_2024\/cta_01.png\" \n width=\"346\" \n height=\"72\" \n alt=\"YEAH, LET'S HELP OLIVER\" \n style=\"display: block; \n font-family: Arial, sans-serif; \n font-size: 14px; \n line-height: 18px; \n color: #000000; \n max-width: 346px;\" \n border=\"0\" \n \/>\n <\/label>\n <\/td>\n<\/tr><\/code><\/pre><\/div><\/div>\n\n\n\n![\"Responsive](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-02-100.jpg\")
<\/a><\/div><\/div>\n\n\n\n<\/h2>\n\n\n\n
Frame 2<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image8-2.png\")
<\/figure><\/div>\n\n\n\n<\/h2>\n\n\n\n
\/* Frame 2 Comes after Some Delay *\/\n#em_help:checked~table .slide-in-elliptic-top-fwd {\n\t-webkit-animation: slide-in-elliptic-top-fwd 1s ease-in both;\n\tanimation: slide-in-elliptic-top-fwd 1s ease-in both;\n\tanimation-delay: 1s;\n\t-webkit-animation-delay: 1s;\n\topacity: 0;\n\tvisibility: hidden;\n}\n @-webkit-keyframes slide-in-elliptic-top-fwd {\n 0% {\n -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);\n transform: translateY(-600px) rotateX(-30deg) scale(0);\n -webkit-transform-origin: 50% 100%;\n transform-origin: 50% 100%;\n}\n 100% {\n -webkit-transform: translateY(0) rotateX(0) scale(1);\n transform: translateY(0) rotateX(0) scale(1);\n -webkit-transform-origin: 50% 1400px;\n transform-origin: 50% 1400px;\n opacity: 1;\n visibility: visible;\n}\n}\n @keyframes slide-in-elliptic-top-fwd {\n 0% {\n -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);\n transform: translateY(-600px) rotateX(-30deg) scale(0);\n -webkit-transform-origin: 50% 100%;\n transform-origin: 50% 100%;<\/code><\/pre><\/div><\/div>\n\n\n\n<\/h2>\n\n\n\n
Frames 3 & 4<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image6-1024x532.jpg\")
<\/figure><\/div>\n\n\n\n<\/h2>\n\n\n\n
<\/h2>\n\n\n\n
#em_enter:checked~table .em_frame3 {\n\t-webkit-animation: fade-in-out 5s ease-in-out both;\n\tanimation: fade-in-out 5s ease-in-out both;\n\t\n}\n @-webkit-keyframes fade-in-out {\n 0% {\n opacity: 0;\n}\n 20% {\n opacity: 1;\n}\n 80% {\n opacity: 1;\n}\n 100% {\n opacity: 0;\n}\n}\n @keyframes fade-in-out {\n 0% {\n opacity: 0;\n}\n 20% {\n opacity: 1;\n}\n 80% {\n opacity: 1;\n}\n 100% {\n opacity: 0;\n}\n#em_enter:checked~table .em_frame4 {\n\t-webkit-animation: fade-in02 3s ease-in both;\n\tanimation: fade-in02 3s ease-in both;\n\tanimation-delay: 4s;\n\t-webkit-animation-delay: 4s;\n}\n @-webkit-keyframes fade-in02 {\n 0% {\n opacity: 0;\n visibility: hidden;\n}\n 100% {\n opacity: 1;\n visibility: visible;\n}\n}\n @keyframes fade-in02 {\n 0% {\n opacity: 0;\n visibility: hidden;\n}\n 100% {\n opacity: 1;\n visibility: visible;\n}\n}\n#em_enter:checked~table .em_frame4 {\n\topacity: 0;\n\tvisibility: hidden;\n\n<\/code><\/pre><\/div><\/div>\n\n\n\nFrames 5 & 6<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image2-1.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image5-1-1024x472.jpg\")
<\/figure><\/div>\n\n\n\n
![\"Gamified](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/06\/email_gamification.png\")
<\/a><\/div><\/div>\n\n\n\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image10-3.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/11\/image7-4.png\")
<\/figure><\/div>\n\n\n\n