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>
<link rel="stylesheet" href=
<script src=
</script>
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...