Open In App

Foundation CSS Motion UI Usage in Components

Improve
Improve
Like Article
Like
Save
Share
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 library provides a large number of built-in animations as well as the capability to create custom animations easily. Many Foundation component animations use the Motion UI library.

Foundation CSS Motion UI Usage in Components provides us to use the animations for the different components. The components have fields defined for animation and we can use either custom or built-in transitions in these components.

Foundation CSS Motion UI Usage in Components with the options:

  • Orbit: data-animate
  • Reveal: data-animation-in, data-animation-out
  • Toggler: data-animate
  • Responsive toggler: data-animate

Syntax: Add the data-animate option and as per the element, add the animate in and animate out option values to it. We have changed the toggler as follows:

<div class="callout" id="panel" data-toggler
    data-animate="hinge-in-from-top spin-out">

    <h4>A computer science portal for geeks</h4>
    <img id="img" class="slow ease"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
    />
</div>

Example (Toggler): In the following example, we have placed a toggler to show/hide a panel.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href=
  
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <div class="ui header green">
            <h1 style="color: green;">GeeksforGeeks</h1>
        </div>
        <strong>Foundation CSS Motion UI Usage in Components</strong>
        <br /><br />
  
        <p><a data-toggle="panel">Toggle Panel</a></p>
  
        <div class="callout" id="panel" data-toggler 
             data-animate="hinge-in-from-top spin-out">
            <h4>A computer science portal for geeks</h4>
            <img id="img" class="slow ease"
                src=
        </div>
    </center>
  
    <script>
        $(document).ready(function () {
            $(document).foundation()
        })
    </script>
</body>
  
</html>


Output:

Example (Reveal): In the following example, we have a Reveal element used to reveal a modal with entry and exit animation.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href=
  
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <div class="ui header green">
            <h1 style="color: green;">GeeksforGeeks</h1>
        </div>
        <strong>Foundation CSS Motion UI Usage in Components</strong>
        <br /><br />
  
        <p>
            <button class="button" data-open="modal">
                Reveal Modal
            </button>
        </p>
  
        <div class="reveal" id="modal" data-reveal 
             data-animation-in="spin-in"
            data-animation-out="hinge-out-from-middle-y">
            <h1>GeeksforGeeks</h1>
            <p>
                A computer science portal for geeks.
            </p>
  
            <button class="close-button" data-close 
                    aria-label="Close modal" type="button">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $(document).foundation()
        })
    </script>
</body>
  
</html>


Output:

Reference: https://get.foundation/sites/docs/motion-ui.html#usage-in-components



Last Updated : 04 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads