🧙♀️ 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);