Foundation CSS Motion UI Usage in Components
Last Updated :
04 Apr, 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 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=
"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>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<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 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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" />
</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=
"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>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<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 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
Similar Reads
Foundation CSS Motion UI Animation A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is
5 min read
Foundation CSS Motion UI Foundation CSS is a front-end framework that helps developers create responsive and mobile-friendly websites. It provides a set of CSS and JavaScript tools that can be used to create consistent and visually appealing layouts and user interfaces. Motion UI is a library that is built on top of Foundat
6 min read
Foundation CSS Orbit Slide Contents Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Lib sass
3 min read
Foundation CSS Prototyping Utilities Component Styling Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
3 min read
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 animatio
5 min read
Foundation CSS Motion UI Built-in Transitions 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 founda
3 min read
Foundation CSS Orbit Using Animation Foundation CSS is an open-source front-end framework that makes it simple and quick to create an appealing responsive website, email, or app. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is
4 min read
Foundation CSS Controls Complete Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Controls use to create different types of switches, buttons, sliders, and tra
2 min read
Foundation CSS Containers Complete Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Container contains features like creating a simple modal, nested model, title
3 min read
Foundation CSS Motion UI JavaScript Reference 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 founda
2 min read