Foundation CSS Motion UI JavaScript Reference Last Updated : 25 Mar, 2022 Comments Improve Suggest changes Like Article Like Report Foundation CSS is one of the best responsive frameworks. The CSS framework adapts to any device, screen, and is accessible widely. We can make beautiful responsive websites with the help of foundation CSS. It is a highly customizable framework. It is an open-source framework built by the ZURB foundation. Foundation CSS Motion UI is a library for creating flexible UI transitions and animations in websites. We can either use the built-in animations or create our own animations using this library. The Javascript Reference allows playing animation on elements using javascript. We can run any requested animation without specifying it on the elements and can be modified using Javascript. Foundation CSS Motion UI Javascript Reference Classes: Motion.animateIn: This is used to play the animation in.Motion.animateOut: This is used to play animation out. Syntax: Select the element on which the animation is to be played and then use the following syntax to play the animation: var elem = $('#img') var anim = 'spin-in-ccw' Motion.animateIn(elem, anim) Example: In the following example, we have an image on which we play the animation in and animation out using the options using Motion UI in Foundation CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <!--Enables the User Interface--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" /> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> </script> <!--Enables the funcationality--> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js"> </script> </head> <body> <center> <div class="ui header green"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <strong> Foundation CSS Motion UI Javascript Reference </strong> <br /> <button class="button" onclick="animateInImage()"> Play In Animation using Javascript </button> <br /> <button class="button" onclick="animateOutImage()"> Play Out Animation using Javascript </button> </center> <center> <img id="img" class="slow ease" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" /> </center> <script> $(document).ready(function() { $(document).foundation() }) const animateInImage = () => { var elem = $('#img') // Element var anim = 'spin-in-ccw' // Animation name Motion.animateIn(elem, anim) // Play Animation } const animateOutImage = () => { var elem = $('#img') // Element var anim = 'spin-out-ccw' // Animation name Motion.animateOut(elem, anim) // Play Animation } </script> </body> </html> Output: Reference: https://get.foundation/sites/docs/motion-ui.html#javascript-reference Comment More infoAdvertise with us Next Article Foundation CSS Motion UI JavaScript Reference M manavsarkar07 Follow Improve Article Tags : Web Technologies CSS Foundation Foundation-Setup Similar Reads Foundation CSS Dropdown Menu JavaScript Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Dropdown Menu is used for displaying an expanda 6 min read Foundation CSS JavaScript using Plugins Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M 3 min read Foundation CSS JavaScript Utilities Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by c 4 min read Foundation CSS JavaScript Miscellaneous Utilities Foundation CSS is a responsive front-end framework for building web applications. It includes a set of CSS styles and JavaScript functions that can be used to create a responsive layout and add interactivity to a website. Foundation CSS JavaScript miscellaneous utilities: Foundation.GetYoDigits([num 4 min read Foundation CSS Orbit Sass Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework 4 min read Foundation CSS Navigation Complete Reference Foundation CSS Navigation is mostly used for the different behavior of cursor navigation on every element. For ex. Foundation CSS Magellan is used to jump to the given target when the link is clicked. It is used when we want to jump to some specific section directly without scrolling down the webpag 3 min read Foundation CSS Prototyping Utilities Sass Reference Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, 4 min read Foundation CSS JavaScript A Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framewor 4 min read Foundation CSS Motion UI Foundation CSS is a front-end framework that helps developers create responsive and mobile-friendly websites. It provides a set of CSS and JavaScript tools that can be used to create consistent and visually appealing layouts and user interfaces. Motion UI is a library that is built on top of Foundat 6 min read Foundation CSS Motion UI Installation Foundation CSS is a front-end framework that provides a consistent and customizable style guide for web development. It includes a wide range of features such as a responsive grid system, typography styles, form styling, and more. Motion UI is a Sass library for creating CSS transitions and animatio 5 min read Like