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 foundation.

Foundation CSS Motion UI is a library for creating flexible UI transitions and animations in websites. We can either use the built-in animations or create our own animations using this library. The 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. 

Foundation CSS Motion UI Javascript Reference Classes:

• Motion.animateIn: This is used to play the animation in.
• Motion.animateOut: This is used to play animation out. 

Syntax: Select the element on which the animation is to be played and then use the following syntax to play the animation:

var elem = $('#img')
var anim = 'spin-in-ccw'
Motion.animateIn(elem, anim) 

Example: In the following example, we have an image on which we play the animation in and animation out using the options using Motion UI in Foundation CSS.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/motion-ui.html#javascript-reference