Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@tweenjs/tween.js
Advanced tools
Readme
JavaScript (TypeScript) tweening engine for easy animations, incorporating optimised Robert Penner's equations.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
<div id="box"></div>
<style>
#box {
background-color: deeppink;
width: 100px;
height: 100px;
}
</style>
<script>
const box = document.getElementById('box') // Get the element we want to animate.
const coords = {x: 0, y: 0} // Start at (0, 0)
const tween = new TWEEN.Tween(coords, false) // Create a new tween that modifies 'coords'.
.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
.easing(TWEEN.Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
.onUpdate(() => {
// Called after tween.js updates 'coords'.
// Move 'box' to the position described by 'coords' with a CSS translation.
box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
})
.start() // Start the tween immediately.
// Setup the animation loop.
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
</script>
Install from a content-delivery network (CDN) like in the above example.
From cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
Or from unpkg.com:
<script src="https://unpkg.com/@tweenjs/tween.js@^20.0.0/dist/tween.umd.js"></script>
Note that unpkg.com supports a semver version in the URL, where the ^
in the URL tells unpkg to give you the latest version 20.x.x.
Currently npm is required to build the project.
git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build
This will create some builds in the dist
directory. There are currently two different builds of the library:
tween.umd.js
tween.es.js
You are now able to copy tween.umd.js into your project, then include it with a script tag, which will add TWEEN to the global scope,
<script src="path/to/tween.umd.js"></script>
or import TWEEN as a JavaScript module,
<script type="module">
import * as TWEEN from 'path/to/tween.es.js'
</script>
where path/to
is replaced with the location where you placed the file.
npm install
and import
from node_modules
You can add tween.js as an npm dependency:
npm install @tweenjs/tween.js
If you are using Node.js, Parcel, Webpack, Rollup, Vite, or another build tool, then you can now use the following to include tween.js:
import * as TWEEN from '@tweenjs/tween.js'
You can import from node_modules
if you serve node_modules as part of your website, using an importmap
script tag. First, assuming node_modules
is at the root of your website, you can write an import map:
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.es.js"
}
}
</script>
Now in any of your module scripts you can import it by its package name:
import * as TWEEN from '@tweenjs/tween.js'
px
)
hello world (source) |
Bars (source) | ||
Black and red (source) |
Graphs (source) | ||
Simplest possible example (source) |
Video and time (source) | ||
Array interpolation (source) |
Dynamic to, object (source) | ||
Dynamic to, interpolation array (source) |
Dynamic to, large interpolation array (source) | ||
Repeat (source) |
Relative values (source) | ||
Yoyo (source) |
Stop all chained tweens (source) | ||
Custom functions (source) |
Relative start time (source) | ||
Pause tween (source) |
Complex properties (source) | ||
Animate an array of values (source) |
You need to install npm
first--this comes with node.js, so install that one first. Then, cd to tween.js
's (or wherever you cloned the repo) directory and run:
npm install
To run the tests run:
npm test
If you want to add any feature or change existing features, you must run the tests to make sure you didn't break anything else. Any pull request (PR) needs to have updated passing tests for feature changes (or new passing tests for new features or fixes) in src/tests.ts
a PR to be accepted. See contributing for more information.
Maintainers: Joe Pea (@trusktr).
FAQs
Simple and fast tweening engine with optimised Robert Penner's equations.
The npm package @tweenjs/tween.js receives a total of 380,885 weekly downloads. As such, @tweenjs/tween.js popularity was classified as popular.
We found that @tweenjs/tween.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.