magic-scrolls

Magic Scrolls

An easy to use scroll based tweening class. Any element can be tweened by a percentage based on how far through the chosen element we have scrolled. The class will handle the tweening, you do the rest!

Features

Scroll Based Animations

For simple, non scroll based tweening, check out Tween;

Feature	Support
Tweening
Parallax

Installation

with webpack

yarn add magic-scrolls

Usage

<section class="banner">
	<div class="banner__image" style="background-image: url('path/to/your/image.jpg');"></div>
</section>

import MagicScrolls from 'magic-scrolls';

const banner = document.querySelector('.banner');
const image = document.querySelector('.banner__image');

The Magic

Create a Magic Scroll!

Option	Type	Description
duration	number	number in milliseconds for how long the tween should take to complete
fps	number	The frames per second for the animation

const magic = new MagicScrolls(banner, {
	duration: 500,
	fps: 60,
});

Tweening

Use tweening to smoothly animate an element's styles based on your scroll position within the Magic Scroll element!

magic.tween(image, (percentage) => {
	image.style.transform = `translateX(${percentage}%)`;
});

Parallax

Parallax is a powerful spell which will move your elements for you.

The image will move precisely within the parent element as a percentage of it's height within the container. You will never see white space and can control the movement simply by changing it's height.

.banner {
	position: relative;
	height: 1000px;
	overflow: hidden;

	&__image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 130%;
	}
}

magic.parallax(image);

License

MIT