Scrollmagic CSS Transitions

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

Uses scrollmagic under the hood.

Install

yarn add scrollmagic-css-transitions scrollmagic

Example

Define your markup and animation

<div class="page anim">
    <div class="box" data-anim=".5s bottom 30px .2s"></div>
</div>

Create a new listener

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

Usage

import ScrollAnimations from 'ScrollAnimations';
 
const scrollAnimations = new ScrollAnimations(options: Object);

Add the following css to enable the transitions:

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

<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:

// 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:

<div data-anim-delay=".3s"></div>

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

Transition direction

Example:

<div data-anim-direction="top"></div>

data-anim-direction [distance]

Transition distance

Example:

<div data-anim-offset="2rem"></div>

data-anim-duration [time]

Transition duration

Example:

<div data-anim-duration="100ms"></div>