{"id":21965,"date":"2024-09-10T03:31:52","date_gmt":"2024-09-10T03:31:52","guid":{"rendered":"https:\/\/www.anifuzion.com\/?post_type=docs&#038;p=21965"},"modified":"2025-02-24T05:47:17","modified_gmt":"2025-02-24T05:47:17","password":"","slug":"move-a-graphic-by-setting-motion-path","status":"publish","type":"docs","link":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/","title":{"rendered":"Move a Graphic by Setting Motion Path"},"content":{"rendered":"<p>In addition to characters, Visual Paradigm Online offers a vast array of elements such as 2D artworks, <a href=\"https:\/\/www.anifuzion.com\/tutorials\/rotate-a-3d-prop\/\">3D props<\/a>, shapes, and more. These elements play a crucial role in enriching your animation, providing depth and variety that bring your scenes to life. To maximize their impact, understanding how to animate these elements by setting a motion path is essential. This tutorial will guide you through the process of moving graphics using motion paths, allowing you to add dynamic movement to your projects.<\/p>\n<h2>Exploring the Elements in VP Online<\/h2>\n<p>VP Online offers a diverse range of 2D artworks, most of which are vector graphics that can be freely resized and recolored to suit your project\u2019s needs. These artworks come in various styles, allowing you to easily pick and customize them to match your animation&#8217;s theme. Whether you\u2019re working on a sleek, modern design or something more whimsical, the wide selection ensures you\u2019ll find the right visual elements. Additionally, the tool includes premade illustrations grouped by different themes, animated assets with built-in animations, and a store of shapes and icons, all of which can be seamlessly integrated into your scenes.<\/p>\n<p>Beyond 2D elements, VP Online also provides an extensive collection of 3D props, which you can rotate to achieve the perfect perspective for your scenes. These props are essential for building immersive environments, especially when working with 3D characters. The ability to manipulate these 3D objects allows you to create more dynamic and realistic settings, enhancing the overall impact of your animation. Whether you\u2019re constructing a detailed background or adding depth to your scenes, these 3D elements are crucial for bringing your creative vision to life.<\/p>\n<h2>Move a Graphic by Setting Motion Path<\/h2>\n<div class=\"entry-content-asset\"><iframe title=\"Move a Graphic by Setting Motion Path\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/77v26zqZ2zQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p>In the editor, press the Add Animation button between the enter and exit animation. The animation palette will appear on the left. Go to <strong>Motion Path<\/strong>, and press <strong>Add Path<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-21967\" src=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path.jpg\" alt=\"Add motion path to the elements with the add button.\" width=\"422\" height=\"104\" srcset=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path.jpg 1851w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path-300x74.jpg 300w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path-1024x252.jpg 1024w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path-768x189.jpg 768w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path-1536x378.jpg 1536w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/add-motion-path-600x147.jpg 600w\" sizes=\"(max-width: 422px) 100vw, 422px\" \/><\/p>\n<p>We will find the selected element is duplicated, moving it to adjust the motion path.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-21969\" src=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-scaled.jpg\" alt=\"Different setting are provided to customize the motion path.\" width=\"694\" height=\"329\" srcset=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-scaled.jpg 2560w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-300x142.jpg 300w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-1024x485.jpg 1024w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-768x364.jpg 768w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-1536x728.jpg 1536w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-2048x971.jpg 2048w, https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Motion-path-of-graphics-600x284.jpg 600w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/><\/p>\n<ol>\n<li><strong>Motion Path Style:<\/strong> You can choose between a straight or curved path for your element&#8217;s movement. Switch between these styles to match the desired motion effect.<\/li>\n<li><strong>Motion Path:<\/strong> This defines the trajectory along which the element will move. By dragging the waypoint in the middle, you can create curves or turns on the path. Drag the semi-transparent waypoints for additional adjustments to fine-tune the path.<\/li>\n<li><strong>Add Point Button:<\/strong> This feature duplicates the element and adds a new motion path segment from the previous point. This allows for continuous movement or multiple segments in your animation.<\/li>\n<li><strong>Easing:<\/strong> Apply easing effects to the end of the movement along the motion path to create a more dynamic and interesting action. This adds a smooth transition or accentuates the end of the movement, enhancing the overall animation.<\/li>\n<\/ol>\n<h2>Enhancing Your Animation with Motion Paths and Entry\/ Exit Animations<\/h2>\n<p>VP Online&#8217;s <a href=\"https:\/\/www.anifuzion.com\/tutorials\/set-enter-exit-animation-effect-to-graphic-and-text\/\">enter and exit animation<\/a> features allow you to control how elements smoothly appear and disappear in your scenes. Adding these types of animations can make your objects dynamic and eye-catching, <a href=\"https:\/\/www.linkedin.com\/advice\/3\/how-can-you-effectively-use-animation-special-zdypf\">enhancing the overall flow<\/a> and engagement of your animation. Whether it&#8217;s text fading in or a graphic sliding out, these animations help create a polished and professional look. They ensure that every element transitions seamlessly, capturing the viewer&#8217;s attention and guiding them through the narrative.<\/p>\n<p>By combining these entry and exit animations with motion paths, you can further elevate the quality of your work. Motion paths enable elements to move across the screen in a controlled manner, adding a new layer of dynamism. This feature allows objects to follow specific trajectories, making the animation more fluid and engaging. Together, these tools give you the flexibility to create complex, visually appealing animations where every movement is purposeful and contributes to the story you\u2019re telling.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/Animation-Library-768x427.jpg\" alt=\"Animation effects provided for different elements in the animation maker.\" width=\"799\" height=\"444\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In addition to characters, Visual Paradigm Online offers a vast array of elements such as 2D artworks, 3D props, shapes, and more. These elements play a crucial role in enriching your animation, providing depth and variety that bring your scenes to life. To maximize their impact, understanding how to animate these elements by setting a motion path is essential. This tutorial will guide you through the process of moving graphics using motion paths, allowing you to add dynamic movement to your projects. Exploring the Elements in VP Online VP Online offers a diverse range of 2D artworks, most of which are vector graphics that can be freely resized and recolored to suit your project\u2019s needs. These artworks come in various styles, allowing you to easily pick and customize them to match your animation&#8217;s theme. Whether you\u2019re working on a sleek, modern design or something more whimsical, the wide selection ensures you\u2019ll find the right visual elements. Additionally, the tool includes premade illustrations grouped by different themes, animated assets with built-in animations, and a store of shapes and icons, all of which can be seamlessly integrated into your scenes. Beyond 2D elements, VP Online also provides an extensive collection of 3D props, which you can rotate to achieve the perfect perspective for your scenes. These props are essential for building immersive environments, especially when working with 3D characters. The ability to manipulate these 3D objects allows you to create more dynamic and realistic settings, enhancing the overall impact of your animation. Whether you\u2019re constructing a detailed background or adding depth to your scenes, these 3D elements are crucial for bringing your creative vision to life. Move a Graphic by Setting Motion Path In the editor, press the Add Animation button between the enter and exit animation. The animation palette will appear on the left. Go to Motion Path, and press Add Path. We will find the selected element is duplicated, moving it to adjust the motion path. Motion Path Style: You can choose between a straight or curved path for your element&#8217;s movement. Switch between these styles to match the desired motion effect. Motion Path: This defines the trajectory along which the element will move. By dragging the waypoint in the middle, you can create curves or turns on the path. Drag the semi-transparent waypoints for additional adjustments to fine-tune the path. Add Point Button: This feature duplicates the element and adds a new motion path segment from the previous point. This allows for continuous movement or multiple segments in your animation. Easing: Apply easing effects to the end of the movement along the motion path to create a more dynamic and interesting action. This adds a smooth transition or accentuates the end of the movement, enhancing the overall animation. Enhancing Your Animation with Motion Paths and Entry\/ Exit Animations VP Online&#8217;s enter and exit animation features allow you to control how elements smoothly appear and disappear in your scenes. Adding these types of animations can make your objects dynamic and eye-catching, enhancing the overall flow and engagement of your animation. Whether it&#8217;s text fading in or a graphic sliding out, these animations help create a polished and professional look. They ensure that every element transitions seamlessly, capturing the viewer&#8217;s attention and guiding them through the narrative. By combining these entry and exit animations with motion paths, you can further elevate the quality of your work. Motion paths enable elements to move across the screen in a controlled manner, adding a new layer of dynamism. This feature allows objects to follow specific trajectories, making the animation more fluid and engaging. Together, these tools give you the flexibility to create complex, visually appealing animations where every movement is purposeful and contributes to the story you\u2019re telling.<\/p>\n","protected":false},"author":3,"featured_media":21974,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","footnotes":""},"doc_category":[95],"doc_tag":[],"class_list":["post-21965","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-props-and-assets"],"year_month":"2026-05","word_count":635,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"wing","author_nicename":"wing","author_url":"https:\/\/www.anifuzion.com\/de\/author\/wing\/"},"doc_category_info":[{"term_name":"Props and Assets","term_url":"https:\/\/www.anifuzion.com\/de\/tutorials\/props-and-assets\/"}],"doc_tag_info":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Move a Graphic by Setting Motion Path - AniFuzion Deutsch<\/title>\n<meta name=\"description\" content=\"VP Online offers a vast array of elements . Learn how to animate these elements by setting a motion path to maximize their impact.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Move a Graphic by Setting Motion Path - AniFuzion Deutsch\" \/>\n<meta property=\"og:description\" content=\"VP Online offers a vast array of elements . Learn how to animate these elements by setting a motion path to maximize their impact.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/\" \/>\n<meta property=\"og:site_name\" content=\"AniFuzion Deutsch\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-24T05:47:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/\",\"url\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/\",\"name\":\"How to Move a Graphic by Setting Motion Path - AniFuzion Deutsch\",\"isPartOf\":{\"@id\":\"https:\/\/www.anifuzion.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg\",\"datePublished\":\"2024-09-10T03:31:52+00:00\",\"dateModified\":\"2025-02-24T05:47:17+00:00\",\"description\":\"VP Online offers a vast array of elements . Learn how to animate these elements by setting a motion path to maximize their impact.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#primaryimage\",\"url\":\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg\",\"contentUrl\":\"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg\",\"width\":\"1920\",\"height\":\"1080\",\"caption\":\"Move a Graphic by Setting Motion Path\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anifuzion.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\/\/www.anifuzion.com\/de\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Move a Graphic by Setting Motion Path\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anifuzion.com\/de\/#website\",\"url\":\"https:\/\/www.anifuzion.com\/de\/\",\"name\":\"AniFuzion Deutsch\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anifuzion.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Move a Graphic by Setting Motion Path - AniFuzion Deutsch","description":"VP Online offers a vast array of elements . Learn how to animate these elements by setting a motion path to maximize their impact.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/","og_locale":"de_DE","og_type":"article","og_title":"How to Move a Graphic by Setting Motion Path - AniFuzion Deutsch","og_description":"VP Online offers a vast array of elements . Learn how to animate these elements by setting a motion path to maximize their impact.","og_url":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/","og_site_name":"AniFuzion Deutsch","article_modified_time":"2025-02-24T05:47:17+00:00","og_image":[{"url":"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/","url":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/","name":"How to Move a Graphic by Setting Motion Path - AniFuzion Deutsch","isPartOf":{"@id":"https:\/\/www.anifuzion.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#primaryimage"},"image":{"@id":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg","datePublished":"2024-09-10T03:31:52+00:00","dateModified":"2025-02-24T05:47:17+00:00","description":"VP Online offers a vast array of elements . Learn how to animate these elements by setting a motion path to maximize their impact.","breadcrumb":{"@id":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#primaryimage","url":"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg","contentUrl":"https:\/\/www.anifuzion.com\/de\/wp-content\/uploads\/sites\/5\/2024\/09\/Thumbnail-1.jpg","width":"1920","height":"1080","caption":"Move a Graphic by Setting Motion Path"},{"@type":"BreadcrumbList","@id":"https:\/\/www.anifuzion.com\/de\/tutorials\/move-a-graphic-by-setting-motion-path\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anifuzion.com\/de\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/www.anifuzion.com\/de\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Move a Graphic by Setting Motion Path"}]},{"@type":"WebSite","@id":"https:\/\/www.anifuzion.com\/de\/#website","url":"https:\/\/www.anifuzion.com\/de\/","name":"AniFuzion Deutsch","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anifuzion.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/docs\/21965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/comments?post=21965"}],"version-history":[{"count":10,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/docs\/21965\/revisions"}],"predecessor-version":[{"id":28632,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/docs\/21965\/revisions\/28632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/media\/21974"}],"wp:attachment":[{"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/media?parent=21965"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/doc_category?post=21965"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.anifuzion.com\/de\/wp-json\/wp\/v2\/doc_tag?post=21965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}