# Scrollmagic CSS Transitions

A small library to help simplify fade and transform (css) transitions based on the scroll position.

Uses [scrollmagic](https://www.npmjs.com/package/scrollmagic) under the hood.

### Install

```bash
yarn add scrollmagic-css-transitions scrollmagic
```

### Example

Define your markup and animation
```html
<div class="page anim">
    <div class="box" data-anim=".5s bottom 30px .2s"></div>
</div>
```

Create a new listener

```js
const scrollAnimations = new ScrollAnimations({
  triggerSelector: '.anim',
  triggerActiveClass: 'anim--active',
  triggerHook: 0.65,
});
```


### Usage

```js
import ScrollAnimations from 'ScrollAnimations';

const scrollAnimations = new ScrollAnimations(options: Object);
```

Add the following css to enable the transitions:

```css
.anim [data-anim] {
    transition-property: opacity, transform;
    transition-timing-function: ease-out;
    opacity: 0;
}

.anim.anim--active [data-anim] {
    opacity: 1;
    transform: translate(0, 0);
}
```

#### Options

Use options to define selectors and transition defaults. Transition options can be applied using data attributes on the scroll child.

**defaultDirection** `string: [top | right | bottom | left]`

Default transition direction

**defaultDistance** `string` default: `25px`

Default transition distance

**defaultDuration** `string` default: `800ms`

Default transition duration

**defaultDelay** `string` default: `0ms`

Default transition delay

**finishTriggerSelector** `string`

Mark all animations as complete and remove all listeners when reaching this element

**triggerActiveClass** `string` default: `anim--active`

Class name to apply to the `triggerSelector` once activated

**triggerHook** `string` default: `0.85`

Percentage of the viewport to apply the `triggerActiveClass`

**triggerSelector** `string` default: `.anim`

Mark as active when this element reaches the given `triggerHook`

#### Data Attributes

Data attributes can be placed on the trigger  or child element to override transition default options.

##### Triggers

**data-anim-offset** `distance`

Offset the active trigger (`triggerHook`) position.

Example:
```html
<div data-anim-offset="100px"></div>
```

##### Children

**data-anim** `[time direction distance time]`

Shorthand for all transition properties:

- duration
- direction
- distance
- delay

Note: Property order is only important for distinguishing between `delay` and `duration`. The first time unit will be considered `duration`.

Examples:
```html
// 100px from the left, transition for .3s with a 200ms delay
<div data-anim=".3s left 100px 200ms"></div>

// Properties can be omitted
// 50px from the top
<div data-anim="top 50px"></div>

// Duration is always the first time value parsed
// Transition for .3s with a 1s delay
<div data-anim=".3s 1s"></div>

// Transition for 1s with a default delay
<div data-anim="1s"></div>
```

**data-anim-delay** `[time]`

Transition delay

Example:
```html
<div data-anim-delay=".3s"></div>
```

**data-anim-delay** `[top | right | bottom | left]`

Transition direction

Example:
```html
<div data-anim-direction="top"></div>
```

**data-anim-direction** `[distance]`

Transition distance

Example:
```html
<div data-anim-offset="2rem"></div>
```

**data-anim-duration** `[time]`

Transition duration

Example:
```html
<div data-anim-duration="100ms"></div>
```