[et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_enable_color=”off” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50-1.jpg” background_position=”top_center” background_vertical_offset=”36%” min_height=”100vh” background_last_edited=”on|phone” background_size_phone=”custom” background_image_width_phone=”260%” background_position_phone=”top_left” background_horizontal_offset_phone=”7%” background_vertical_offset_phone=”-10%” global_colors_info=”{}”][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”2_3″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”80px” text_line_height=”1.1em” custom_margin=”50px||30px||false|false” text_font_size_tablet=”80px” text_font_size_phone=”40px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n
<\/span><\/span><\/span>Mapping: Charting Cosmic Paths<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#FFFFFF” text_font_size=”18px” text_line_height=”1.8em” custom_margin=”|100px|||false|false” custom_margin_tablet=”|100px|||false|false” custom_margin_phone=”|0px|||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>Explore how UI Animation brings the concept of Mapping to life by dynamically connecting user actions with system responses, providing a clear and engaging experience.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5-Mapping-Planet.gif” title_text=”5- Mapping Planet” align_tablet=”” align_phone=”right” align_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” width_tablet=”” width_phone=”80%” width_last_edited=”on|phone” custom_margin=”-60px||||false|false” custom_margin_tablet=”-60px||||false|false” custom_margin_phone=”-90px|||120px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50.jpg” height=”100vh” height_tablet=”100vh” height_phone=”160vh” height_last_edited=”on|phone” custom_margin_tablet=”” custom_margin_phone=”-100px||||false|false” custom_margin_last_edited=”on|desktop” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”5vh||||false|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span><\/span>Overview<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” global_colors_info=”{}”]<\/p>\n Mapping animations serve as navigation aids within the interface, helping users comprehend spatial relationships between elements. These animations provide clear indications of users’ current position, where they’ve been, and potential destinations within the interface.<\/p>\n Mapping animations are instrumental in preventing users from becoming disoriented within the interface. They offer context and guidance, facilitating seamless navigation across various sections and features. Implementing mapping animations ensures users maintain a precise mental map of the interface’s structure, resulting in a more enjoyable and efficient journey.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/7.-Mapping.gif” title_text=”7. Mapping” align=”right” align_tablet=”right” align_phone=”center” align_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” max_width=”80%” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”ToolkitGuidelines” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/11\/6.-Mapping-Section-Full-50.jpg” background_position=”top_center” background_vertical_offset=”23%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100vh” min_height_last_edited=”on|phone” scroll_fade_enable=”on” scroll_fade=”0|50|50|100|0|100|0%” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” saved_tabs=”all” global_colors_info=”{}”][et_pb_row module_id=”ToolkitGuidelines” _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||10px||false|false” custom_padding=”|||30px|false|false” scroll_fade_enable=”on” hover_enabled=”0″ text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}” content_last_edited=”on|phone” content_phone=”<\/p>\n <\/span><\/span><\/span>Mapping Guidelines<\/span><\/p>\n ” custom_padding_last_edited=”on|phone” custom_padding_phone=”|||15px|false|false” sticky_enabled=”0″ content_tablet=”<\/p>\n <\/span><\/span><\/span>Mapping Guidelines<\/span><\/p>\n ” custom_padding_tablet=”|||30px|false|false”]<\/p>\n <\/span><\/span><\/span>Mapping Guidelines<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_slider arrows_custom_color=”#FFFFFF” dot_nav_custom_color=”#8300E9″ arrows_custom_color_tablet=”#FFFFFF” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” header_text_color=”#FFFFFF” header_font_size=”25px” header_line_height=”1.2em” body_font=”Lato||||||||” body_text_color=”#FFFFFF” body_font_size=”18px” body_line_height=”1.8em” background_color=”RGBA(255,255,255,0)” text_orientation=”left” custom_margin=”-100px||||false|false” custom_css_slide_description=”font-family: lato, sans-serif;” custom_css_slide_title=”font-family: dita, sans-serif;||padding-bottom: 12px;||font-weight: 600;” custom_css_slide_button=”display: none;” body_text_shadow_style=”preset1″ body_text_shadow_color=”rgba(0,0,0,0)” text_shadow_style=”preset1″ text_shadow_color=”rgba(0,0,0,0)” global_colors_info=”{}” content_width__hover_enabled=”on|desktop”][et_pb_slide heading=”Navigation Constellations” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5.-Mapping-Guidelines.gif” arrows_custom_color_tablet=”” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” background_enable_image=”off” parallax=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n Use animations to visually connect different parts of the interface during transitions, creating a sense of navigation through the interface.<\/p>\n [\/et_pb_slide][et_pb_slide heading=”Stellar Layering” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5.-Mapping-Guidelines.gif” arrows_custom_color_tablet=”” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n Employ animations to layer and rearrange interface elements based on user interactions, providing contextual mapping.<\/p>\n Create animations that mimic the movement of the theme that you are employing, like planets orbiting, to illustrate contextual changes.<\/p>\n [\/et_pb_slide][et_pb_slide heading=”Interstellar Discoveries” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5.-Mapping-Guidelines.gif” arrows_custom_color_tablet=”” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n Incorporate animations that assist users in navigating new sections or discovering additional features, fostering an exploratory experience.<\/p>\n Integrate animations such as subtle transitions or tooltips to signify the exploration of hidden functionalities in the user interface.<\/p>\n [\/et_pb_slide][\/et_pb_slider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.23.1″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-Section-50.jpg” min_height=”100vh” scroll_fade=”0|50|50|100|0%|100|0%” background_last_edited=”on|phone” background_size_phone=”custom” background_image_width_phone=”300%” background_image_height_phone=”0%” background_position_phone=”center” background_vertical_offset_phone=”120%” border_width_top=”5px” border_color_top=”#FFFFFF” border_width_bottom=”5px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row _builder_version=”4.23.1″ _module_preset=”default” max_width=”100%” custom_margin=”30vh||||false|false” custom_margin_tablet=”30vh||||false|false” custom_margin_phone=”25vh||||false|false” custom_margin_last_edited=”on|phone” custom_padding=”||||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”80px” text_line_height=”1.1em” width_tablet=”” width_phone=”100%” width_last_edited=”on|phone” custom_padding=”||||false|false” animation_style=”fade” scroll_scaling_enable=”on” text_font_size_tablet=”80px” text_font_size_phone=”40px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>Celestial Courses through Mapping Animation<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”VisualContinuity” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50.jpg” background_position=”top_center” background_vertical_offset=”14%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span>1. Visual Continuity <\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>Use animation by letting an element stay in place during a state change. Visual continuity makes transitions easier to understand for users as each element stays the their original position even throughout the animation.\u00a0<\/span><\/p>\n [\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||10px||false|false” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span><\/span>Example<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>A user selects a range or value using a slider control, and as they move the slider, the displayed range or value animates to show the change, creating a clear and direct connection between user actions and system responses.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Visual-Continuity.gif” title_text=”1. Visual Continuity” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” module_alignment=”center” custom_margin=”-60px||||false|false” custom_margin_tablet=”-60px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”PathwayAnimation” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Affordance-50.jpg” background_position=”top_center” background_vertical_offset=”23%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” width_tablet=”” width_phone=”” width_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>2. Pathway Animation<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>Use animations to validate the information and showcase the link between an input field and information provided to the user.<\/p>\n [\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||10px||false|false” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span><\/span>Example<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>In a password creation form, when the user enters a password that is too short or too long, a real-time animation line is displayed showcasing in red the length of the password, getting the information to the user across faster. This shows the mapping between the password length and the feedback provided to the user.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Pathway-Animation.gif” title_text=”2. Pathway Animation” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”ContextualLayering” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50.jpg” min_height=”100vh” link_option_url=”ContextualLayering” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” min_height_tablet=”” min_height_phone=”” min_height_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>3. Contextual Layering<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span><\/span>Use animations to layer and rearrange interface elements based on user interactions, helping users understand the context.<\/span><\/p>\n [\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||10px||false|false” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span><\/span>Example<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>In a digital interface, clicking on a visual element, such as an image or icon, can trigger an animation that expands the element to reveal additional content while gently pushing the surrounding interface downward, creating a contextual layer. This design technique adds depth and context to user interactions.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Contextual-Layering.gif” title_text=”3. Contextual Layering” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” custom_margin=”-60px||||false|false” custom_margin_tablet=”-60px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50.jpg” background_position=”top_center” background_vertical_offset=”11%” min_height=”100vh” border_width_top=”10px” border_color_top=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/5.-Mapping-Resource.gif” title_text=”5. Mapping Resource” align=”center” disabled_on=”on|off|off” _builder_version=”4.22.2″ _module_preset=”default” width=”80%” custom_margin=”-50px||||false|false” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_padding=”|||30px|false|false” custom_padding_tablet=”|||30px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span><\/span><\/span>Resource<\/span><\/p>\n [\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_margin=”||40px|30px|false|false” custom_margin_tablet=”||40px|30px|false|false” custom_margin_phone=”||40px|0px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n <\/span>Click on the button to go to the Mapping Animated Example Figma File.<\/p>\n [\/et_pb_text][et_pb_button button_url=”https:\/\/www.figma.com\/file\/ojoj3iAc1xMSCbHsSXqw4u\/UI-Animate-Guide-Principle-Examples?type=design&node-id=5-29137&mode=design” button_text=”Figma File” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||30px|false|false” custom_margin_tablet=”|||30px|false|false” custom_margin_phone=”|||0px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" Mapping: Charting Cosmic PathsExplore how UI Animation brings the concept of Mapping to life by dynamically connecting user actions with system responses, providing a clear and engaging experience.OverviewMapping animations serve as navigation aids within the interface, helping users comprehend spatial relationships between elements. These animations provide clear indications of users’ current position, where they’ve been, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-137","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=137"}],"version-history":[{"count":85,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/137\/revisions"}],"predecessor-version":[{"id":1163,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/137\/revisions\/1163"}],"wp:attachment":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}