{"id":195,"date":"2025-01-26T07:34:01","date_gmt":"2025-01-26T07:34:01","guid":{"rendered":"https:\/\/larningbox.com\/staging\/?post_type=course&#038;p=195"},"modified":"2025-01-26T14:51:19","modified_gmt":"2025-01-26T14:51:19","slug":"ui-animation-motion-design-course-for-website","status":"publish","type":"course","link":"https:\/\/larningbox.com\/staging\/courses\/motiongraphics\/ui-animation-motion-design-course-for-website\/","title":{"rendered":"UI Animation Motion Design Course for Website"},"content":{"rendered":"\n<p>This UI Animation Motion Design Course for Website teach you to be master motion design for the web with this comprehensive tutorial. Learn to utilize video, CSS, JavaScript, GSAP, SVG, Lottie, and more to create visually stunning and user-engaging websites.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Foundations of Motion Design<\/strong>\n<ul class=\"wp-block-list\">\n<li>Introduction and key concepts<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Video in Web Design<\/strong>\n<ul class=\"wp-block-list\">\n<li>Adding videos to web pages<\/li>\n\n\n\n<li>Exercise: Product feature with video<\/li>\n\n\n\n<li>Exercise: Hero section with video background<\/li>\n\n\n\n<li>Optimizing video for web performance<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CSS Transitions<\/strong>\n<ul class=\"wp-block-list\">\n<li>Introduction to CSS transitions<\/li>\n\n\n\n<li>Exercise: Website header<\/li>\n\n\n\n<li>Exercise: Simple dropdown menu<\/li>\n\n\n\n<li>Exercise: Image gallery<\/li>\n\n\n\n<li>Exercise: Cool accordion<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CSS Animations<\/strong>\n<ul class=\"wp-block-list\">\n<li>Introduction to CSS animations<\/li>\n\n\n\n<li>Exercise: Simple loading screen<\/li>\n\n\n\n<li>CSS animations vs. CSS transitions<\/li>\n\n\n\n<li>Exploring loading animations<\/li>\n\n\n\n<li>Exercise: Site preloader<\/li>\n\n\n\n<li>Exercise: SVG text loader<\/li>\n\n\n\n<li>Exercise: Button with animated loading dots<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Animating Graphics<\/strong>\n<ul class=\"wp-block-list\">\n<li>Animating illustrations and icons<\/li>\n\n\n\n<li>Exercise: Animated Lottie icon<\/li>\n\n\n\n<li>Exercise: Animated menu icon<\/li>\n\n\n\n<li>Exercise: Animated illustration<\/li>\n\n\n\n<li>Exercise: Animated avatars<\/li>\n\n\n\n<li>Creating accent animations<\/li>\n\n\n\n<li>Exercise: Animated logo<\/li>\n\n\n\n<li>Exercise: Typewriter effect<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Interactive Animations<\/strong>\n<ul class=\"wp-block-list\">\n<li>Playing around with interactive animations<\/li>\n\n\n\n<li>Exercise: Mouse follow effect<\/li>\n\n\n\n<li>Exercise: Scroll-triggered animation<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Depth and Dimension<\/strong>\n<ul class=\"wp-block-list\">\n<li>Adding depth and dimension with parallax<\/li>\n\n\n\n<li>Exercise: Parallax animation<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Motion and Responsive Design<\/strong><\/li>\n\n\n\n<li><strong>Conclusion<\/strong><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This UI Animation Motion Design Course for Website teach you to be master motion design for the web with this comprehensive tutorial. Learn to utilize video, CSS, JavaScript, GSAP, SVG, Lottie, and more to create visually stunning and user-engaging websites.<\/p>\n","protected":false},"author":1,"featured_media":224,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"course_category":[8],"class_list":["post-195","course","type-course","status-publish","has-post-thumbnail","hentry","course_category-motiongraphics"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Animation Motion Design Course for Website - Larning Box<\/title>\n<meta name=\"description\" content=\"This UI Animation Motion Design Course for Website teach you to be master motion design for the web with this comprehensive tutorial.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/\",\"url\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/\",\"name\":\"UI Animation Motion Design Course for Website - Larning Box\",\"isPartOf\":{\"@id\":\"https:\/\/larningbox.com\/staging\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/UI-Animation-Motion-Design-Course-for-Website.webp\",\"datePublished\":\"2025-01-26T07:34:01+00:00\",\"dateModified\":\"2025-01-26T14:51:19+00:00\",\"description\":\"This UI Animation Motion Design Course for Website teach you to be master motion design for the web with this comprehensive tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#primaryimage\",\"url\":\"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/UI-Animation-Motion-Design-Course-for-Website.webp\",\"contentUrl\":\"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/UI-Animation-Motion-Design-Course-for-Website.webp\",\"width\":1280,\"height\":720,\"caption\":\"UI Animation Motion Design Course for Website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/larningbox.com\/staging\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Courses\",\"item\":\"https:\/\/larningbox.com\/staging\/course\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UI Animation Motion Design Course for Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/larningbox.com\/staging\/#website\",\"url\":\"https:\/\/larningbox.com\/staging\/\",\"name\":\"Larning Box\",\"description\":\"Best Popular Free Courses\",\"publisher\":{\"@id\":\"https:\/\/larningbox.com\/staging\/#organization\"},\"alternateName\":\"LB\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/larningbox.com\/staging\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/larningbox.com\/staging\/#organization\",\"name\":\"Larning Box\",\"url\":\"https:\/\/larningbox.com\/staging\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/larningbox.com\/staging\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/Larning-Box.svg\",\"contentUrl\":\"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/Larning-Box.svg\",\"width\":160,\"height\":32,\"caption\":\"Larning Box\"},\"image\":{\"@id\":\"https:\/\/larningbox.com\/staging\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/helloaksarkar\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Animation Motion Design Course for Website - Larning Box","description":"This UI Animation Motion Design Course for Website teach you to be master motion design for the web with this comprehensive tutorial.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/","url":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/","name":"UI Animation Motion Design Course for Website - Larning Box","isPartOf":{"@id":"https:\/\/larningbox.com\/staging\/#website"},"primaryImageOfPage":{"@id":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#primaryimage"},"image":{"@id":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#primaryimage"},"thumbnailUrl":"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/UI-Animation-Motion-Design-Course-for-Website.webp","datePublished":"2025-01-26T07:34:01+00:00","dateModified":"2025-01-26T14:51:19+00:00","description":"This UI Animation Motion Design Course for Website teach you to be master motion design for the web with this comprehensive tutorial.","breadcrumb":{"@id":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#primaryimage","url":"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/UI-Animation-Motion-Design-Course-for-Website.webp","contentUrl":"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/UI-Animation-Motion-Design-Course-for-Website.webp","width":1280,"height":720,"caption":"UI Animation Motion Design Course for Website"},{"@type":"BreadcrumbList","@id":"https:\/\/larningbox.com\/staging\/course\/ui-animation-motion-design-course-for-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/larningbox.com\/staging\/"},{"@type":"ListItem","position":2,"name":"Courses","item":"https:\/\/larningbox.com\/staging\/course\/"},{"@type":"ListItem","position":3,"name":"UI Animation Motion Design Course for Website"}]},{"@type":"WebSite","@id":"https:\/\/larningbox.com\/staging\/#website","url":"https:\/\/larningbox.com\/staging\/","name":"Larning Box","description":"Best Popular Free Courses","publisher":{"@id":"https:\/\/larningbox.com\/staging\/#organization"},"alternateName":"LB","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/larningbox.com\/staging\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/larningbox.com\/staging\/#organization","name":"Larning Box","url":"https:\/\/larningbox.com\/staging\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/larningbox.com\/staging\/#\/schema\/logo\/image\/","url":"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/Larning-Box.svg","contentUrl":"https:\/\/larningbox.com\/staging\/wp-content\/uploads\/2025\/01\/Larning-Box.svg","width":160,"height":32,"caption":"Larning Box"},"image":{"@id":"https:\/\/larningbox.com\/staging\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/in\/helloaksarkar\/"]}]}},"_links":{"self":[{"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/course\/195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/course"}],"about":[{"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/types\/course"}],"author":[{"embeddable":true,"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":0,"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/course\/195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/media\/224"}],"wp:attachment":[{"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"course_category","embeddable":true,"href":"https:\/\/larningbox.com\/staging\/wp-json\/wp\/v2\/course_category?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}