https://github.com/wellcaffeinated/intween

Your companion for building rich interactive media with Interactive Tweens.
https://github.com/wellcaffeinated/intween

interactive javascript tween tweening-engine

Last synced: 30 days ago
JSON representation

Your companion for building rich interactive media with Interactive Tweens.

• Host: GitHub
• URL: https://github.com/wellcaffeinated/intween
• Owner: wellcaffeinated
• License: mit
• Created: 2018-11-20T16:03:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2025-04-10T21:10:16.000Z (about 1 year ago)
• Last Synced: 2025-09-25T23:59:42.633Z (9 months ago)
• Topics: interactive, javascript, tween, tweening-engine
• Language: JavaScript
• Homepage: https://intween.wellcaffeinated.net
• Size: 2.57 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# InTween

[![NPM Package][npm]][npm-url]

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Your companion for building rich interactive media with **Interactive Tweens**.

[Guide](https://intween.wellcaffeinated.net/guide) —

[Demos](https://intween.wellcaffeinated.net/demos/) —

[API Docs](https://intween.wellcaffeinated.net/api/)

### Quick Start ###

```sh

yarn add intween

# -- or --

npm install -s intween

```

```js

import { Tween, Meddle, Player, spreadAssign, animationThrottle } from 'intween'

```

Or use a CDN

```html

const { Tween, Meddle, Player, spreadAssign, animationThrottle } = InTween // window.InTween

```

Now play!

```js

const tween = new Tween({

  position: [0, 0]

})

tween.to({

  position: [1, 1]

}, {

  startTime: '1s',

  endTime: '2s',

  easing: 'quadInOut'

})

const meddle = new Meddle(tween).easing('backIn')

// connect it to some interaction event

window.addEventListener('click', e => {

  const position = [e.clientX, e.clientY]

  meddle.set({ position })

})

const player = new Player(tween.duration)

player.pipe(

  spreadAssign(

    tween,

    meddle

  )

  , animationThrottle()

).subscribe(state => {

  // do stuff with state.position

})

player.play() // go!

```

[npm]: https://img.shields.io/npm/v/intween

[npm-url]: https://www.npmjs.com/package/intween