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.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</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=
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.
<!DOCTYPE html> <html lang="en">
<head>
<!-- Foundation CSS Stylesheet -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<!-- jQuery CDN -->
<script src=
</script>
<!-- Foundation CSS JavaScript -->
<script src=
</script>
<script src=
</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