Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
rebound
Advanced tools
Readme
Rebound is a simple library that models Spring dynamics for the purpose of driving physical animations.
Rebound was originally written in Java to provide a lightweight physics system for Home and Chat Heads on Android. It's now been adopted by several other Android applications. This JavaScript port was written to provide a quick way to demonstrate Rebound animations on the web for a conference talk. Since then the JavaScript version has been used to build some really nice interfaces. Check out brandonwalkin.com for an example.
The Library provides a SpringSystem for maintaining a set of Spring objects and iterating those Springs through a physics solver loop until equilibrium is achieved. The Spring class is the basic animation driver provided by Rebound. By attaching a listener to a Spring, you can observe its motion. The observer function is notified of position changes on the spring as it solves for equilibrium. These position updates can be mapped to an animation range to drive animated property updates on your user interface elements (translation, rotation, scale, etc).
Check out the tests, and examples for more details.
Here's a simple example. Pressing and releasing on the logo below will cause it to scale up and down with a springy animation.
<div style="text-align:center; margin-bottom:50px; margin-top:50px">
<img
src="http://facebook.github.io/rebound/images/rebound.png"
id="logo"
/>
</div>
<script src="../rebound.min.js"></script>
<script>
function scale(el, val) {
el.style.mozTransform =
el.style.msTransform =
el.style.webkitTransform =
el.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
}
var el = document.getElementById('logo');
var springSystem = new rebound.SpringSystem();
var spring = springSystem.createSpring(50, 3);
spring.addListener({
onSpringUpdate: function(spring) {
var val = spring.getCurrentValue();
val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, 0.5);
scale(el, val);
}
});
el.addEventListener('mousedown', function() {
spring.setEndValue(1);
});
el.addEventListener('mouseout', function() {
spring.setEndValue(0);
});
el.addEventListener('mouseup', function() {
spring.setEndValue(0);
});
</script>
// Get a reference to the logo element.
var el = document.getElementById('logo');
// create a SpringSystem and a Spring with a bouncy config.
var springSystem = new rebound.SpringSystem();
var spring = springSystem.createSpring(50, 3);
// Add a listener to the spring. Every time the physics
// solver updates the Spring's value onSpringUpdate will
// be called.
spring.addListener({
onSpringUpdate: function(spring) {
var val = spring.getCurrentValue();
val = rebound.MathUtil
.mapValueInRange(val, 0, 1, 1, 0.5);
scale(el, val);
}
});
// Listen for mouse down/up/out and toggle the
//springs endValue from 0 to 1.
el.addEventListener('mousedown', function() {
spring.setEndValue(1);
});
el.addEventListener('mouseout', function() {
spring.setEndValue(0);
});
el.addEventListener('mouseup', function() {
spring.setEndValue(0);
});
// Helper for scaling an element with css transforms.
function scale(el, val) {
el.style.mozTransform =
el.style.msTransform =
el.style.webkitTransform =
el.style.transform = 'scale3d(' +
val + ', ' + val + ', 1)';
}
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
FAQs
A simple library for modeling spring dynamics
The npm package rebound receives a total of 13,573 weekly downloads. As such, rebound popularity was classified as popular.
We found that rebound demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
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.