https://github.com/bramus/sda-utilities

Collection of utility functions for use with Scroll-Driven Animations
https://github.com/bramus/sda-utilities

Last synced: about 2 months ago
JSON representation

Collection of utility functions for use with Scroll-Driven Animations

• Host: GitHub
• URL: https://github.com/bramus/sda-utilities
• Owner: bramus
• License: mit
• Created: 2023-10-05T20:31:18.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-05T20:37:28.000Z (about 1 year ago)
• Last Synced: 2024-10-08T03:11:13.138Z (3 months ago)
• Language: JavaScript
• Homepage: https://npmjs.com/@bramus/sda-utilities
• Size: 8.79 KB
• Stars: 29
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Scroll-Driven Animations Utilities

Collection of utility functions for use with Scroll-Driven Animations

## Installation

```bash

npm i @bramus/sda-utilities

```

## The Utilities

### `runOnce` – Run Scroll-Driven Animation only once

Example: run the `fade-in` animation on the `.hero` element only once.

```js

import { runOnce } from '@bramus/sda-utilities';

window.addEventListener('load', (e) => {

	const $hero = document.querySelector('#hero');

	runOnce($hero, 'fade-in');

});

```

### `trackProgress` – Sync the progress of an effect to something external

Example: output the animation progress as text on the page.

```js

import { trackProgress } from '@bramus/sda-utilities';

window.addEventListener('load', (e) => {

	trackProgress(document.querySelector('.animation-subject').getAnimations()[0], (progress) => {

		document.querySelector('.animation-subject').innerText = `${(progress * 100).toFixed(5)}%`;

	});

});

```

## Demos

Demos are included in this repository. Run `npm run dev` and visit `http://127.0.0.1:8000/` to see the demos.

```bash

npm run dev

```

## License

`@bramus/sda-utilities` is released under the MIT public license. See the enclosed `LICENSE` for details.