36 lines
1.3 KiB
Markdown
36 lines
1.3 KiB
Markdown
|
# WOW.js Integration
|
||
|
|
|
||
|
|
Motion UI can be paired with [WOW.js](http://mynameismatthieu.com/WOW/) to trigger animations as elements scroll into view. **[Here's a CodePen that illustrates the concepts below](http://codepen.io/gakimball/pen/WrKRRy)**.
|
||
|
|
|
||
|
|
To start, load the JavaScript for WOW.js. The quickest way to do this is by loading from a CDN:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
Next, in your main JavaScript file, initialize WOW:
|
||
|
|
|
||
|
|
```js
|
||
|
|
var wow = new WOW();
|
||
|
|
wow.init();
|
||
|
|
```
|
||
|
|
|
||
|
|
Lastly, we need animation classes to add to elements. Because Motion UI is a transition-focused library, there aren't many animation classes that come out of the box. The built-in animation classes are `.wiggle`, `.shake`, `.spin-cw`, and `.spin-ccw`. However, creating out own animation class using any of the transition effects is easy, using Motion UI's Sass mixins.
|
||
|
|
|
||
|
|
Here's a basic fade class. Refer to the [documentation on animations](animations.md) to learn more about how animations are built.
|
||
|
|
|
||
|
|
```scss
|
||
|
|
.animate-fade-in {
|
||
|
|
@include mui-animation(fade);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Now we can apply this class to any element. We also add the class `.wow`, so WOW knows which elements to target as the page scrolls.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<img class="wow animate-fade-in" src="//placekitten.com/300/300">
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|