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 =
< 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
Share your thoughts in the comments
Please Login to comment...