Skip to content
Related Articles

Related Articles

Foundation CSS Motion UI JavaScript Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Mar, 2022
View Discussion
Improve Article
Save Article

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=
    <script src=
    </script>
  
    <!--Enables the funcationality-->
    <link rel="stylesheet" href=
    <script src=
    </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=
    </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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!