Foundation CSS Motion UI JavaScript Reference

Last Updated : 25 Mar, 2022

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

Foundation CSS Motion UI JavaScript Reference

manavsarkar07

Improve

Article Tags :

Foundation CSS Motion UI JavaScript Reference

Similar Reads

Thank You!

What kind of Experience do you want to share?