magic-scrolls

0.1.8 • Public • Published

🧙‍♀️ 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

Package Sidebar

Install

npm i magic-scrolls

Weekly Downloads

0

Version

0.1.8

License

MIT

Unpacked Size

15.1 kB

Total Files

5

Last publish

Collaborators

  • meteora-digital