Foundation CSS Motion UI Usage in Components
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 Beginner</h4> <img id="img" class="slow ease" src= "https://media.w3wiki.net/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/foundation-sites@6.7.4/dist/css/foundation.min.css" /> < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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;" >w3wiki</ 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 Beginner</ h4 > < img id = "img" class = "slow ease" src = "https://media.w3wiki.net/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/foundation-sites@6.7.4/dist/css/foundation.min.css" /> < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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;" >w3wiki</ 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 >w3wiki</ h1 > < p > A computer science portal for Beginner. </ 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
Contact Us