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 Foundation CSS, and it is designed to provide developers with a set of CSS classes and JavaScript methods for creating animations and transitions. It allows developers to easily add animations and transitions to their websites without having to write complex code.
The Foundation CSS Motion UI includes several components, which are described below:
- Installing: Installing the library with npm or yarn. Alternatively, one can start using Motion UI through a CDN.
- Usage In Components: 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.
- Built-in Transitions: Foundation CSS Motion UI Built-in Transitions are a set of pre-defined animations by the foundation CSS. Foundation CSS Motion UI Built-in Transition Classes contain Animation configuration and types.
- Custom Transitions: Every Motion UI effect is customizable. Foundation CSS Motion UI Custom Transitions can be created using the provided Sass variables and Motion UI's mixin library, which can then be easily added to web pages and elements, making it easy to add dynamic and interactive effects to websites.
- Animations: Foundation CSS Motion UI Animation provides a Sass library for creating flexible UI transitions and animations. It is a standalone library that powers the transition effects used in a number of Foundation components. The library also allows to the creation of a series of effects, with animations on multiple elements happening in a queue.
- Javascript Reference: Foundation CSS Motion UI 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.
Example 1: This example includes buttons that allow the user to trigger different transitions that are being applied and demonstrated on the image.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3><u>Foundation CSS Motion UI</u></h3>
<br />
<!-- Buttons for different animations -->
<button type="button" class="success button"
onclick="playAnimation('slide-in-down')">
slide-in-down
</button>
<button type="button" class="success button"
onclick="playAnimation('slide-in-right')">
slide-in-right
</button>
<button type="button" class="success button"
onclick="playAnimation('fade-in')">
fade-in
</button>
<button type="button" class="success button"
onclick="playAnimation('hinge-in-from-top')">
hinge-in-from-top
</button>
<button type="button" class="success button"
onclick="playAnimation('scale-in-up')">
scale-in-up
</button>
<button type="button" class="success button"
onclick="playAnimation('spin-in-ccw')">
spin-in-ccw
</button>
<br />
</center>
<center>
<!-- Image to be animated -->
<img id="img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
alt="GFG_logo" />
</center>
<script>
const playAnimation = (animation) => {
MotionUI.animateIn('#img', animation)
}
</script>
</body>
</html>
Output:
Demonstrating the usage of built-in transitions
Explanation: The body of the HTML document includes several buttons, each with a different animation effect, such as "slide-in-down" and "fade-in." When one of these buttons is clicked, the corresponding animation effect is applied to an image with the id "img." The JavaScript function "playAnimation" is used to handle the button clicks and apply the animation effect to the image. The function takes in a single argument, "animation," which is used to specify which animation effect should be applied. The MotionUI.animateIn() method is then used to apply the animation effect to the image using the passed animation argument.
Example 2: This is an HTML code that uses Foundation CSS and JavaScript, jQuery, and Motion UI library to create a webpage with a circular container that holds a text element with an animation effect that can be started and paused using buttons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Foundation CSS Stylesheet -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/motion-ui.min.css" />
<!-- jQuery CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Foundation CSS JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/plugins/foundation.util.motion.min.js">
</script>
<style>
.myButton {
padding: .75rem 1.25rem;
background-color: red;
border-radius: 2px;
color: white;
box-shadow: 0 .125rem .0625rem rgba(0, 0, 0, .2);
cursor: pointer;
}
.myButton--success {
background-color: green;
}
/* Animation is paused until ".is-animating" is applied */
.animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border-radius: 50%;
width: 300px;
height: 300px;
}
.animation.is-animating {
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes my-pulse {
0% {
opacity: .25;
transform: rotate(0deg);
}
50% {
opacity: 1;
transform: rotate(180deg);
}
100% {
opacity: .25;
transform: rotate(360deg);
}
}
@keyframes my-pulse {
0% {
opacity: .25;
transform: rotate(0deg);
}
50% {
opacity: 1;
transform: rotate(180deg);
}
100% {
opacity: .25;
transform: rotate(360deg);
}
}
.animated-element {
color: white;
font-weight: bold;
text-align: center;
padding: 3rem 0;
margin-bottom: 1rem;
background: linear-gradient(90deg, #afd771, #41e735, green);
}
.animation-fade {
-webkit-animation-name: my-pulse;
animation-name: my-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3><u>Foundation CSS Motion UI</h3></u>
</center>
<center>
<div data-animation class="animated-element
animation animation-fade">
Animation Demonstration
</div>
<button data-animation-start class="myButton
myButton--success">
PLAY
</button>
<button data-animation-stop class="myButton"
style="display:none;">
PAUSE
</button>
</center>
<script>
$(document).ready(() => {
$('[data-animation-start]').on('click', () => {
$('[data-animation]').addClass('is-animating');
$('[data-animation-start]').hide();
$('[data-animation-stop]').show();
});
$('[data-animation-stop]').on('click', () => {
$('[data-animation]').removeClass('is-animating');
$('[data-animation-start]').show();
$('[data-animation-stop]').hide();
})
})
</script>
</body>
</html>
Output:
Animating using Foundation CSS Motion UI
Explanation: The animation is created by using the @keyframes CSS rule to define the animation and the animation-name, animation-duration, and animation-iteration-count properties to control the animation. The animation is initially paused by setting the animation-play-state property to paused and is set to running when the 'is-animating' class is added.
When the user clicks the 'PLAY' button, the 'is-animating' class is added to the 'data-animation' element, and the animation starts playing. The 'PLAY' button is then hidden and the 'PAUSE' button is shown. When the user clicks the 'PAUSE' button, the 'is-animating' class is removed from the 'data-animation' element, and the animation is paused. The 'PAUSE' button is then hidden and the 'PLAY' button is shown.
Overall, it creates a black circular container with an animation of text inside it that reads "Animation Demonstration" and with two buttons to play and pause. On clicking play, the animation starts, and on clicking pause animation stops.
Reference: https://get.foundation/sites/docs/motion-ui.html
Similar Reads
Foundation CSS Menu
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
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 Menu Icons
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
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 Orbit
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. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
4 min read
Foundation CSS Tutorial
Foundation CSS is an open-source, responsive front-end framework developed by ZURB in September 2011. It’s a powerful tool that simplifies the creation of visually appealing responsive websites, apps, and emails that function seamlessly on any device. Renowned companies such as Facebook, eBay, Mozil
6 min read
Foundation CSS Tooltip Top
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
3 min read
Foundation CSS Menu Text
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
3 min read
Foundation CSS Kitchen Sink
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. Kitchen Sink has the foundation elements to work well o
2 min read
Foundation CSS Sticky Navigation
Foundation CSS is a free and open-source front-end framework that aids in the creation of flexible web designs. It's one of the most powerful CSS frameworks, and it works across all devices, delivering a responsive grid as well as HTML and CSS UI components, templates, and more. It also includes som
5 min read