svg-scroll v0.1.1

svg-scroll

A minimalist Javascript library to create scroll animations easily – no third-party dependencies.

The current use case is the animation of fixed (CSS: position: fixed) SVG graphics over a long page (1000+ px of height). The amount of scrolling is used to determine the current state of the animation and make it flow.

If you can't quite visualize it yet, why not go see the DEMO?

Installation

npm install svg-scroll

Simple Example

var wrappedElement = new svgScroll.ScrollWrapper('#my-svg-path');

document.addEventListener('DOMContentLoaded', wrappedElement.hide, false);

window.addEventListener("scroll", function(e) {
    wrappedElement.reveal([0, 0.8], [0, 1]);
    wrappedElement.changeOnScroll([0.7, 0.9], 'stroke', ['#bc3c2f', '#ecd093']);
    wrappedElement.changeOnScroll([0.9, 1], 'opacity', [1, 0]);
});

See this example in full action HERE.

Documentation

ScrollWrapper

The one and only focus of svg-scroll is the ScrollWrapper, which return an object exposing 4 methods to streamline the creation of SVG scroll animations.

usage

var ScrollWrapper = svgScroll.ScrollWrapper;
var wrappedElement = new ScrollWrapper('#some-css-selector');

new ScrollWrapper(selector)

Methods

• changeOnScroll
• hide
• reveal
• toggleClass

changeOnScroll

usage

wrappedElement.changeOnScroll([0.4, 0.7], 'opacity', [1, 0]);

Where wrappedElement is a ScrollWrapper object.

The snippet above gradually changes the opacity of wrappedElement from 1 to 0 as the viewer scrolls from 40% to 70% of the total page length.

This flexible method can be used on any kind of DOM elements – notably divs containing SVG graphics (see DEMO source code for example). It also parses a few different formats of property values.

changeOnScroll(scrollPositions, propertyName, propertyValues)

Setter functions should take the following form: propertySetter(element, propertyValue), for instance:

function setStroke(element, color) {
element.style.stroke = color;
}

wrappedElement.changeOnScroll([0.7, 0.9], setStroke, ['#bc3c2f', '#ecd093']);

Supported value formats:

// numbers
wrappedElement.changeOnScroll([0, 1], 'opacity', [1, 0]);
// (hex) colors
wrappedElement.changeOnScroll([0, 1], 'fill', ['#F89406', '#000000']);
// value/unit strings
wrappedElement.changeOnScroll([0, 1], 'top', ['-5vh', '3vh']);

hide

usage

wrappedSvgPath.hide();

Where wrappedElement is a ScrollWrapper object.

Fully hides an SVG path to reveal it later. The original element has to be an SVG path.

No arguments.

reveal

usage

wrappedElement.reveal([0, 0.8], [0, 0.5]);

Where wrappedElement is a ScrollWrapper object.

The snippet above reveals the first half (from 0 to 0.5) of the path as the viewer scrolls from 40% to 70% of the total page length.

The original element has to be an SVG path.

reveal(scrollPositions, pathFractions, isReverse)

Note on pathFractions: it is totally possible to have an initial bigger than the final pathFraction. This will produce a gradual concealement of the path:

wrappedElement.reveal([0.5, 1], [1, 0], false);

toggleClass

usage

wrappedElement.toggleClass([0.5, 0.8], 'highlighted');

Where wrappedElement is a ScrollWrapper object.

The snippet above adds the class highlighted to the element when the viewer is scrolling from 50% to 80% of the total page length. The class is absent otherwise.

This method will also work on non-SVG elements.

toggled(scrollPositions, className)

License

MIT Licensed. Copyright (c) Anna Traussnig 2016.