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 animations. It is included as part of the Foundation CSS framework and can be used to add simple and complex animations to web pages and web applications.

There are 3 ways to install Foundation CSS & Motion UI:

• Download the precompiled CSS and JavaScript files from the Foundation website and include them in your project manually. To do this, follow these steps:
  • Visit the Foundation website and click on the "Download" button.
  • Select the "Custom" option and make sure that the "Motion UI" checkbox is checked.
  • Click on the "Download" button and save the zip file to your computer.
  • Extract the zip file and copy the "CSS" and "js" directories into your project folder.
  • In your HTML file, include the following links to the CSS and JavaScript files:

<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>

• Use a Package Manager (such as npm or yarn) to install Foundation CSS and Motion UI as dependencies in your project. To do this, follow these steps:
  • Make sure that you have npm or yarn installed on your computer. If not, you can install npm by downloading and installing Node.js or yarn by following the instructions on the yarn website.
  • Open a terminal window and navigate to the root directory of your project.
  • Run the following command to install Foundation CSS and Motion UI as dependencies:

npm install foundation-sites motion-ui --save  
OR
yarn add foundation-sites motion-ui

• In your JavaScript file, import the Foundation CSS and Motion UI modules like this:

import 'foundation-sites/dist/css/foundation.css';
import 'motion-ui/dist/motion-ui.css';
import 'foundation-sites/js/foundation.js';

• Use a CSS and JavaScript bundler such as webpack or Parcel to build and bundle your project. To do this, follow these steps:
  • Make sure that you have webpack or Parcel installed on your computer. If not, you can install webpack by running the following command:

npm install webpack -g

or install Parcel by running the following command:

npm install -g parcel-bundler

• Open a terminal window and navigate to the root directory of your project.
• Run the following command to install Foundation CSS and Motion UI as dependencies:

npm install foundation-sites motion-ui --save
OR
yarn add foundation-sites motion-ui

• Create a configuration file for webpack or Parcel.

There are a few different ways to install the Foundation CSS Motion UI library:

• Download the files: Alternatively, you can download the Motion UI library directly from the Foundation website and include it in your project manually.
• Use a package manager: If you are using a package manager like npm or yarn, you can install Motion UI 
• Use a CDN: Finally, you can include Motion UI in your project by linking to the library from a CDN (Content Delivery Network)

To install Motion UI, you will need to include it in your project in one of the following ways:

• Download the Motion UI source files and link to them in your HTML file:
  • Download Motion UI from the Foundation website or from GitHub
  • Unzip the downloaded file and copy the CSS and js directories to your project
  • In your HTML file, add a link to the Motion UI CSS file:

<link rel="stylesheet" href="/https/www.geeksforgeeks.org/path/to/motion-ui.min.css">

• Install Motion UI using npm by executing the following command to install Motion UI through npm:  

npm install motion-ui                                                                      

• In your JavaScript file, import Motion UI:

import MotionUI from 'motion-ui';                                                    

• Use the Motion UI Sass files in your project: Install Motion UI through npm:

npm install motion-ui

• In your Sass file, import Motion UI:

@import 'motion-ui';

• Use a CDN to include Motion UI in your project: Add the following script to the head of your HTML file:

<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/motion-ui.min.css">

Now, we have successfully installed & can use Motion UI's classes and mixins in your project to add transitions and animations to your elements. 

Example 1: This example illustrates the basic usage of the Foundation CSS Motion UI. Here, we have implemented the specific animation that will be played on the paragraph element when the function is called.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.3.min.js"
            integrity=
"sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 
            crossorigin="anonymous">
    </script>

    <!--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 class="text-center">
    <h1 style="color:green"> 
        GeeksforGeeks
    </h1>
    <h3>
        Foundation CSS Motion UI Installation
    </h3>
    <button class="button" 
            onclick="animateInImage()">
        Click to Rotate
    </button>

    <p id="para" 
       class="slow ease" 
       style="color:red">
           Text will Rotate
    </p>

    <script>
        $(document).ready(function () {
            $(document).foundation()
        })
        const animateInImage = () => {
            var elem = $('#para');
            var anim = 'spin-in-ccw'
            Motion.animateIn(elem, anim);
        }

    </script>
</body>

</html>

Output: 

Example 2: This example demonstrates the Foundation CSS Motion-UI slide-in-down & scale-in-up animations. Here, when one of the buttons is clicked, the corresponding animation will be played on the heading element.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.3.min.js"
        integrity=
"sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 
        crossorigin="anonymous">
    </script>

    <!--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 class="text-center">
    <h1 style="color:green">
         GeeksforGeeks
    </h1>
    <h3> 
        Foundation CSS Motion UI Installation
    </h3>
    <button type="button" 
            class="hollow button" 
            onclick="playAnimation('slide-in-down')">
        slide-in-down
    </button>
    <button type="button" 
            class="hollow button"
            onclick="playAnimation('scale-in-up')">
        fade-in
    </button><br>
    <h4 id="para" 
        class="slow ease" 
        style="color:red"> 
        This text will Animate
    </h4>

    <script>
        const playAnimation = (animation) => {
            MotionUI.animateIn('#para', animation)
        }
    </script>
</body>

</html>

Output: 

Reference: https://get.foundation/sites/docs/motion-ui.html

bakkeshks

Follow

Improve

Article Tags :

• Technical Scripter
• Web Technologies
• CSS
• Technical Scripter 2022
• Foundation

+1 More