{"id":14961361,"url":"https://github.com/steadicat/react-rebound","last_synced_at":"2025-05-07T13:05:01.258Z","repository":{"id":36563462,"uuid":"40869359","full_name":"steadicat/react-rebound","owner":"steadicat","description":"High-performance spring animations in React","archived":false,"fork":false,"pushed_at":"2019-03-28T22:23:26.000Z","size":682,"stargazers_count":136,"open_issues_count":0,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-07T13:04:50.542Z","etag":null,"topics":["animation","react","spring"],"latest_commit_sha":null,"homepage":"http://steadicat.github.io/react-rebound/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steadicat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-17T06:17:55.000Z","updated_at":"2024-07-13T11:58:03.000Z","dependencies_parsed_at":"2022-09-16T07:51:22.641Z","dependency_job_id":null,"html_url":"https://github.com/steadicat/react-rebound","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadicat%2Freact-rebound","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadicat%2Freact-rebound/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadicat%2Freact-rebound/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadicat%2Freact-rebound/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadicat","download_url":"https://codeload.github.com/steadicat/react-rebound/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252883225,"owners_count":21819159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","react","spring"],"created_at":"2024-09-24T13:24:53.761Z","updated_at":"2025-05-07T13:05:01.196Z","avatar_url":"https://github.com/steadicat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Rebound\n\nA spring-based React animation library that animates elements directly in the DOM for maximum performance. Hooks and component-based API available. Spring physics are based on [rebound](https://github.com/facebook/rebound-js).\n\nCheck out some demos [here](http://steadicat.github.io/react-rebound/).\n\n## The `useAnimation` hook\n\n`useAnimation` takes a “ref” to the element you want to animate, and an object containing the end values for the spring animation.\n\n```js\nimport {useAnimation} from 'react-rebound';\n\nfunction Example() {\n  const [hovered] = React.useState(false);\n  const ref = React.useRef();\n\n  // A little “pop” on hover\n  useAnimation(ref, {scaleX: hovered ? 1.1 : 1, scaleY: hovered ? 1.1 : 1});\n\n  return (\n    \u003cbutton\n      ref={ref}\n      onMouseEnter={() =\u003e setHovered(true)}\n      onMouseLeave={() =\u003e setHovered(false)}\u003e\n      Hover Me\n    \u003c/button\u003e\n  );\n}\n```\n\n## The `Animate` component\n\nThe `Animate` component wraps the DOM element you want to animate. It takes the end values for the spring animation as props.\n\n```js\nimport {Animate} from 'react-rebound';\n\nfunction Example() {\n  const [hovered] = React.useState(false);\n\n  return (\n    \u003cAnimate scaleX={hovered ? 1.1 : 1} scaleY={hovered ? 1.1 : 1}\u003e\n      \u003cbutton onMouseEnter={() =\u003e setHovered(true)} onMouseLeave={() =\u003e setHovered(false)}\u003e\n        Hover Me\n      \u003c/button\u003e\n    \u003c/Animate\u003e\n  );\n}\n```\n\n## Configuring springs\n\nYou can configure the `tension` and `friction` for the spring that’s driving the animation. Use props on `Animate`, and a third parameter to `useAnimation`.\n\nA `delay` parameter is also available. It defers the animation by the specified number of milliseconds. This is useful for cascading animations.\n\n```js\n// Using useAnimation\nuseAnimation(ref, {translateX: clicked ? 200 : 0}, {tension: 200, friction: 400, delay: 100});\n\u003cbutton ref={ref}\u003eClick Me\u003c/button\u003e\n\n\n// Using Animate\n\u003cAnimate translateX={clicked ? 200 : 0} tension={200} friction={400} delay={100}\u003e\n  \u003cbutton\u003eClick Me\u003c/button\u003e\n\u003c/Animate\u003e\n```\n\n## Animating colors\n\nYou can animate between two colors by representing colors as RGB(A) arrays. See [Supported properties](#supported-properties) for the list of color properties supported.\n\n```js\n\u003cAnimate color={hovered ? [238, 85, 34] : [0, 0, 0]}\u003e\n  \u003ca href=\"#\"\u003eHover Me\u003c/a\u003e\n\u003c/Animate\u003e\n```\n\n## Render function with `animating` parameter\n\nSometimes it’s useful to render children differently during animations. To do that, provide a function as the only child. The function takes one parameter, a boolean that tells you whether an animation is in progress.\n\nThis option is only avaliable with the `Animate` component. If you’re using the `useAnimation` hook, use [start and end callbacks](#start-and-end-callbacks).\n\n```js\n\u003cAnimate scaleX={expanded ? 3 : 1} scaleY={expanded ? 3 : 1}\u003e\n  {animating =\u003e \u003cimg style={{zIndex: expanded || animating ? 1 : 0}} /\u003e}\n\u003c/Animate\u003e\n```\n\n## Start and end callbacks\n\nIn complex situations it might be useful to be notified when an animation starts or ends. `useCallback` and `Animate` provide two callbacks: `onStart` and `onEnd`.\n\n```js\n\n// Using useAnimation\nuseAnimation(\n  ref,\n  {scaleX: expanded ? : 5 : 1, scaleY: expanded ? 5 : 1},\n  {onStart: onExpandStart, onEnd: onExpandEnd},\n);\n\n// Using Animate\n\u003cAnimate\n  scaleX={expanded ? 5 : 1}\n  scaleY={expanded ? 5 : 1}\n  onStart={onExpandStart}\n  onEnd={onExpandEnd}\u003e\n  \u003cimg /\u003e\n\u003c/Animate\u003e\n```\n\n## Animating on first render\n\nTo animate an element in on mount, first render with the initial value, then trigger an animation using `componentDidMount` or `useEffect`:\n\n```js\n// Using useAnimation\nconst ref = React.useRef();\nconst [visible, setVisible] = React.useState(false);\n\nReact.useEffect(() =\u003e setVisible(true), []);\n\nuseAnimation(ref, {opacity: visible ? 1 : 0});\n\n\u003cbutton ref={ref}\u003eHover Me\u003c/button\u003e;\n\n// Using Animate\nconst [visible, setVisible] = React.useState(false);\n\nReact.useEffect(() =\u003e setVisible(true), []);\n\n\u003cAnimate opacity={visible ? 1 : 0}\u003e\n  \u003cbutton\u003eHover Me\u003c/button\u003e\n\u003c/Animate\u003e;\n```\n\n## Setting initial values\n\nSpring animations should always start from their previous value: this is why with `react-rebound` you only specify the end value of the animation.\n\nIn some special cases, it might be necessary to override the start value. You have two options:\n\n1. Use the `setCurrentValue` imperative API (see [Setting current values and velocity](#setting-current-values-and-velocity)).\n2. Render with an initial value and `animate={false}`, then render again with your end value and `animate={true}`.\n\n```js\n// Using useAnimation\nconst [visible, setVisible] = React.useState(false);\nconst instantHide = React.useCallback(() =\u003e setVisible(false));\nconst fadeIn = React.useCallback(() =\u003e setVisible(true));\nuseAnimation(ref, {opacity: visible ? 1 : 0}, {animate: visible});\n\n\u003cbutton ref={ref}\u003eHover Me\u003c/button\u003e;\n\n// Using Animate\nconst [visible, setVisible] = React.useState(false);\nconst instantHide = React.useCallback(() =\u003e setVisible(false));\nconst fadeIn = React.useCallback(() =\u003e setVisible(true));\n\n\u003cAnimate opacity={visible ? 1 : 0} animate={visible}\u003e\n  \u003cbutton\u003eHover Me\u003c/button\u003e\n\u003c/Animate\u003e;\n```\n\n## Setting current values and velocity\n\n`useAnimation` returns an object containing all the Rebound springs, indexed by\nproperty name. This gives you full control if you need it, including the option\nof calling `setCurrentValue` and `setVelocity` on the springs directly. This is\nuseful for swipes and drags, where you want to override the spring animation\nwhile dragging, and preserve velocity when the drag ends.\n\n```js\nconst ref = React.useRef();\nconst springs = useAnimation(ref, {translateX: restingPosition});\n\nconst onSwipeMove = React.useCallback(() =\u003e {\n  springs.translateX.setCurrentValue(currentPosition);\n});\n\nconst onSwipeEnd = React.useCallback(() =\u003e {\n  springs.translateX.setVelocity(200);\n});\n\n\u003cimg ref={ref} /\u003e;\n```\n\nWhen using `Animate`, you can override the current value and velocity of an\nanimation using the public methods `setCurrentValue` and `setVelocity` on the\ncomponent instance.\n\n```js\nconst animation = React.useRef();\n\nconst onSwipeMove = React.useCallback(() =\u003e {\n  animation.current.setCurrentValue('translateX', currentPosition);\n});\n\nconst onSwipeEnd = React.useCallback(() =\u003e {\n  animation.current.setVelocity('translateX', 200);\n});\n\n\u003cAnimate ref={animation} translateX={restingPosition}\u003e\n  \u003cimg /\u003e\n\u003c/Animate\u003e;\n```\n\n## Supported properties\n\nThis is the full list of properties you can animate:\n\n### Transforms\n\n- **translateX**: number in px\n- **translateY**: number in px\n- **translateZ**: number in px\n- **scaleX**: number representing the scale ratio (1 is the default)\n- **scaleY**: number representing the scale ratio (1 is the default)\n- **rotateX**: number in deg\n- **rotateY**: number in deg\n- **rotateZ**: number in deg\n- **skewX**: number in deg\n- **skewY**: number in deg\n\n### Position and opacity\n\n- **top**: number in px\n- **left**: number in px\n- **right**: number in px\n- **bottom**: number in px\n- **width**: number in px\n- **height**: number in px\n- **opacity**: number between 0 and 1\n\n### Colors\n\n**Warning**: animating colors causes a paint on every frame. Consider animating using opacity instead.\n\n- **color**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **background**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **backgroundColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **borderBottomColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **borderColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **borderLeftColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **borderRightColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **borderTopColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **outlineColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n- **textDecorationColor**: array of numbers, either [r, g, b] or [r, g, b, a]\n\n### Text\n\n**Warning**: animating text properties can create slow and jittery animations. Consider using scale and translate transforms instead.\n\n- **fontSize**: number in px\n- **lineHeight**: number in px\n- **letterSpacing**: number in px\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadicat%2Freact-rebound","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadicat%2Freact-rebound","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadicat%2Freact-rebound/lists"}