All Projects → pomber → use-spring

pomber / use-spring

Licence: MIT license
Hooke's law hook

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to use-spring

Use Web Animations
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
Stars: ✭ 802 (+1413.21%)
Mutual labels:  hook, motion, transition
Vue Motion
Easy and natural state transitions
Stars: ✭ 373 (+603.77%)
Mutual labels:  motion, transition
Element Motion
Tween between view states with declarative zero configuration element motions for React
Stars: ✭ 828 (+1462.26%)
Mutual labels:  motion, transition
Anix
🐿 Super easy and lightweight(<3kb) JavaScript animation library
Stars: ✭ 239 (+350.94%)
Mutual labels:  motion, transition
AniX
🐿 Super easy and lightweight(<3kb) JavaScript animation library
Stars: ✭ 253 (+377.36%)
Mutual labels:  motion, transition
Advance
Physics-based animations for iOS, tvOS, and macOS.
Stars: ✭ 4,445 (+8286.79%)
Mutual labels:  physics, motion
Droidmotion
🏂 Implementation of a simple android motion
Stars: ✭ 200 (+277.36%)
Mutual labels:  motion, transition
ux-animate
A simple but powerful tweening, spring physics, animation library for Rust
Stars: ✭ 19 (-64.15%)
Mutual labels:  physics, motion
Popmotion
Simple animation libraries for delightful user interfaces
Stars: ✭ 18,656 (+35100%)
Mutual labels:  physics, motion
springer
A spring that generates realistic easing functions
Stars: ✭ 47 (-11.32%)
Mutual labels:  physics, motion
Mathutilities
A collection of some of the neat math and physics tricks that I've collected over the last few years.
Stars: ✭ 2,815 (+5211.32%)
Mutual labels:  physics, motion
react-transition-state
Zero dependency React transition state machine.
Stars: ✭ 239 (+350.94%)
Mutual labels:  hook, transition
Frida Skeleton
基于frida的安卓hook框架,提供了很多frida自身不支持的功能,将hook安卓变成简单便捷,人人都会的事情
Stars: ✭ 222 (+318.87%)
Mutual labels:  hook
react-media-hook
React Hook for Media Queries
Stars: ✭ 60 (+13.21%)
Mutual labels:  hook
Use Image Color
🎨 A hook to grab a color palette from images. Render a skeleton color while your original image still loading.
Stars: ✭ 222 (+318.87%)
Mutual labels:  hook
Neteasemusiccrack
iOS网易云音乐 免VIP下载、去广告、去更新 无需越狱...
Stars: ✭ 221 (+316.98%)
Mutual labels:  hook
TemplePlus
ToEE hooks, extensions and fixes
Stars: ✭ 73 (+37.74%)
Mutual labels:  hook
jazzer
Add some visual smooth jazz to your page
Stars: ✭ 19 (-64.15%)
Mutual labels:  transition
Understand Plugin Framework
demos to help understand plugin framwork
Stars: ✭ 2,507 (+4630.19%)
Mutual labels:  hook
Fridacontainer
FridaContainer 整合了网上流行的和自己编写的常用的 frida 脚本,为逆向工作提效之用。 frida 脚本模块化,Java & Jni Trace。
Stars: ✭ 190 (+258.49%)
Mutual labels:  hook

use-spring

Install

npm install use-spring

Use

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useSpring } from "use-spring";

function App() {
  const [target, setTarget] = useState(0);
  const handleTargetChange = e => setTarget(+e.target.value);
  const [current] = useSpring(target);
  return (
    <div>
      <input type="range" value={target} onChange={handleTargetChange} />
      <br />
      <input type="range" value={current} readOnly />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Demos

API

// default values:
const [x, isMoving] = useSpring(target, {
  stiffness: 170,
  damping: 26,
  mass: 1,
  decimals: 2,
  teleport: false,
  from: target,
  initialSpeed: 0
});

You can try different values of stiffness, damping or mass on the Spring Editor.

Related

MIT License

Copyright (c) 2019 Rodrigo Pombo

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].