14 |
15 |
16 | or
17 |
18 | 1. [Download the module](ClassAnimation.coffee?raw=true)
19 | 2. Copy the `ClassAnimation.coffee` file to your prototype's `modules` folder.
20 | 3. Call `{ClassAnimation} = require "ClassAnimation"` in your Framer prototype.
21 |
22 | ClassAnimation module depends on Velocity.js library. If you want to use your prototype offline,
23 | please download [velocity.min.js](https://github.com/julianshapiro/velocity/raw/master/velocity.min.js)
24 | and also include it in your
25 | `modules` folder. Otherwise, the module will download the library from web and you don't need to worry about it.
26 |
27 | ## How to Use [(see the live demo)](https://framer.cloud/aMvYj/)
28 |
29 | Import the module and optional handy [Style](#bonus-set-your-styles-like-a-human-being) function for fancy CSS initiation.
30 | ```coffeescript
31 | {ClassAnimation} = require "ClassAnimation"
32 | {Style} = require "ClassAnimation" # Optional
33 | ```
34 |
35 | ### Animate
36 |
37 | Module is designed to mimic Framer's core `Animation` as much as possible
38 | in order to make it easier to work with.
39 |
40 | Thanks to that, it takes similar inputs as the default Framer animation—just
41 | instead of `layer` use `string` with the name of class you want to animate.
42 |
43 |
44 | ```coffeescript
45 | socialCard = new Layer
46 |
47 | socialCard.html =
48 | """
49 |