1. Components
Optionally pick the component to be used in the app. They are ButtonList, ItemTitle and ItemDescription, specify the variable like so:
| Option | Value | Description |
|---|---|---|
| components | [] | Disable all components |
| components | [0, 1, 2] | ButtonList, ItemTitle and ItemDescription |
| components | [0] | ButtonList |
| components | [1] | ItemTitle |
| components | [2] | ItemDescription |
2. Custom transition per item
Use data-segment in the format of "rows:columns" with data-preset to customize the transition per item. For example:
data-segment="5:5" means slicing the current items into 5 rows and 5 columns segment
3. Animation
anime.js is used as the core tweening engine. The application exposes two most common tweening variables "easing" and "duration", further customization and development can
be implemented by tweaking the source code.
| Option | Default | Description |
|---|---|---|
| easing | 'easeOutQuint' | animejs easing equation |
| duration | 2000 | animejs tweening duration |
4. Look and feel
A default dark theme and light theme are provided in download package. Simply pick ".light.css" for light theme or ".css" for dark theme
to use in your project. Our development environment implements SASS and Compass framework to modularize the code base into visual related sections.