A spring that solves your animation problems.

Last update: Jun 26, 2022

React-Motion

Build Status npm version Bower version react-motion channel on discord

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

Animate a counter from 0 to 10. For more advanced usage, see below.

Install

  • Npm: npm install --save react-motion

  • Bower: do not install with bower install react-motion, it won't work. Use bower install --save https://unpkg.com/react-motion/bower.zip. Or in bower.json:

{
  "dependencies": {
    "react-motion": "https://unpkg.com/react-motion/bower.zip"
  }
}

then include as

<script src="bower_components/react-motion/build/react-motion.js"></script>
  • 1998 Script Tag:
<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
(Module exposed as `ReactMotion`)

Works with React-Native v0.18+.

Demos

Check the wiki for more!

Try the Demos Locally

git clone https://github.com/chenglou/react-motion.git
cd react-motion
npm install
  • With hot reloading (slow, development version): run npm start.
  • Without hot reloading (faster, production version): run npm run build-demos and open the static demos/demo_name/index.html file directly. Don't forget to use production mode when testing your animation's performance!

To build the repo yourself: npm run prepublish.

What does this library try to solve?

My React-Europe talk

For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.

This library also provides an alternative, more powerful API for React's TransitionGroup.

API

Exports:

  • spring
  • Motion
  • StaggeredMotion
  • TransitionMotion
  • presets

Here's the well-annotated public Flow type definition file (you don't have to use Flow with React-motion, but the types help document the API below).

P.S. using TypeScript? Here are the React-motion TypeScript definitions!


Helpers

- spring: (val: number, config?: SpringHelperConfig) => OpaqueConfig

Used in conjunction with the components below. Specifies the how to animate to the destination value, e.g. spring(10, {stiffness: 120, damping: 17}) means "animate to value 10, with a spring of stiffness 120 and damping 17".

  • val: the value.

  • config: optional, for further adjustments. Possible fields:

    • stiffness: optional, defaults to 170.
    • damping: optional, defaults to 26.
    • precision: optional, defaults to 0.01. Specifies both the rounding of the interpolated value and the speed (internal).

    It's normal not to feel how stiffness and damping affect your spring; use Spring Parameters Chooser to get a feeling. Usually, you'd just use the list of tasteful stiffness/damping presets below.

- Presets for {stiffness, damping}

Commonly used spring configurations used like so: spring(10, presets.wobbly) or spring(20, {...presets.gentle, precision: 0.1}). See here.


<Motion />

Usage

<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>

Props

- style: Style

Required. The Style type is an object that maps to either a number or an OpaqueConfig returned by spring() above. Must keep the same keys throughout component's existence. The meaning of the values:

  • an OpaqueConfig returned from spring(x): interpolate to x.
  • a number x: jump to x, do not interpolate.
- defaultStyle?: PlainStyle

Optional. The PlainStyle type maps to numbers. Defaults to an object with the same keys as style above, whose values are the initial numbers you're interpolating on. Note that during subsequent renders, this prop is ignored. The values will interpolate from the current ones to the destination ones (specified by style).

- children: (interpolatedStyle: PlainStyle) => ReactElement

Required function.

  • interpolatedStyle: the interpolated style object passed back to you. E.g. if you gave style={{x: spring(10), y: spring(20)}}, you'll receive as interpolatedStyle, at a certain time, {x: 5.2, y: 12.1}, which you can then apply on your div or something else.

  • Return: must return one React element to render.

- onRest?: () => void

Optional. The callback that fires when the animation comes to a rest.


<StaggeredMotion />

Animates a collection of (fixed length) items whose values depend on each other, creating a natural, springy, "staggering" effect like so. This is preferred over hard-coding a delay for an array of Motions to achieve a similar (but less natural-looking) effect.

Usage

<StaggeredMotion
  defaultStyles={[{h: 0}, {h: 0}, {h: 0}]}
  styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
    return i === 0
      ? {h: spring(100)}
      : {h: spring(prevInterpolatedStyles[i - 1].h)}
  })}>
  {interpolatingStyles =>
    <div>
      {interpolatingStyles.map((style, i) =>
        <div key={i} style={{border: '1px solid', height: style.h}} />)
      }
    </div>
  }
</StaggeredMotion>

Aka "the current spring's destination value is the interpolating value of the previous spring". Imagine a spring dragging another. Physics, it works!

Props

- styles: (previousInterpolatedStyles: ?Array<PlainStyle>) => Array<Style>

Required function. Don't forget the "s"!

  • previousInterpolatedStyles: the previously interpolating (array of) styles (undefined at first render, unless defaultStyles is provided).

  • Return: must return an array of Styles containing the destination values, e.g. [{x: spring(10)}, {x: spring(20)}].

- defaultStyles?: Array<PlainStyle>

Optional. Similar to Motion's defaultStyle, but an array of them.

- children: (interpolatedStyles: Array<PlainStyle>) => ReactElement

Required function. Similar to Motion's children, but accepts the array of interpolated styles instead, e.g. [{x: 5}, {x: 6.4}, {x: 8.1}]

(No onRest for StaggeredMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.)


<TransitionMotion />

Helps you to do mounting and unmounting animation.

Usage

You have items a, b, c, with their respective style configuration, given to TransitionMotion's styles. In its children function, you're passed the three interpolated styles as params; you map over them and produce three components. All is good.

During next render, you give only a and b, indicating that you want c gone, but that you'd like to animate it reaching value 0, before killing it for good.

Fortunately, TransitionMotion has kept c around and still passes it into the children function param. So when you're mapping over these three interpolated styles, you're still producing three components. It'll keep interpolating, while checking c's current value at every frame. Once c reaches the specified 0, TransitionMotion will remove it for good (from the interpolated styles passed to your children function).

This time, when mapping through the two remaining interpolated styles, you'll produce only two components. c is gone for real.

import createReactClass from 'create-react-class';

const Demo = createReactClass({
  getInitialState() {
    return {
      items: [{key: 'a', size: 10}, {key: 'b', size: 20}, {key: 'c', size: 30}],
    };
  },
  componentDidMount() {
    this.setState({
      items: [{key: 'a', size: 10}, {key: 'b', size: 20}], // remove c.
    });
  },
  willLeave() {
    // triggered when c's gone. Keeping c until its width/height reach 0.
    return {width: spring(0), height: spring(0)};
  },
  render() {
    return (
      <TransitionMotion
        willLeave={this.willLeave}
        styles={this.state.items.map(item => ({
          key: item.key,
          style: {width: item.size, height: item.size},
        }))}>
        {interpolatedStyles =>
          // first render: a, b, c. Second: still a, b, c! Only last one's a, b.
          <div>
            {interpolatedStyles.map(config => {
              return <div key={config.key} style={{...config.style, border: '1px solid'}} />
            })}
          </div>
        }
      </TransitionMotion>
    );
  },
});

Props

First, two type definitions to ease the comprehension.

  • TransitionStyle: an object of the format {key: string, data?: any, style: Style}.

    • key: required. The ID that TransitionMotion uses to track which configuration is which across renders, even when things are reordered. Typically reused as the component key when you map over the interpolated styles.

    • data: optional. Anything you'd like to carry along. This is so that when the previous section example's c disappears, you still get to access c's related data, such as the text to display along with it.

    • style: required. The actual starting style configuration, similar to what you provide for Motion's style. Maps keys to either a number or an OpaqueConfig returned by spring().

  • TransitionPlainStyle: similar to above, except the style field's value is of type PlainStyle, aka an object that maps to numbers.

- styles: Array<TransitionStyle> | (previousInterpolatedStyles: ?Array<TransitionPlainStyle>) => Array<TransitionStyle>

Required. Accepts either:

  • an array of TransitionStyle configs, e.g. [{key: 'a', style: {x: spring(0)}}, {key: 'b', style: {x: spring(10)}}].

  • a function similar to StaggeredMotion, taking the previously interpolating styles (undefined at first call, unless defaultStyles is provided), and returning the previously mentioned array of configs. You can do staggered mounting animation with this.

- defaultStyles?: Array<TransitionPlainStyle>

Optional. Similar to the other components' defaultStyle/defaultStyles.

- children: (interpolatedStyles: Array<TransitionPlainStyle>) => ReactElement

Required function. Similar to other two components' children. Receive back an array similar to what you provided for defaultStyles, only that each style object's number value represent the currently interpolating value.

- willLeave?: (styleThatLeft: TransitionStyle) => ?Style

Optional. Defaults to () => null. The magic sauce property.

  • styleThatLeft: the e.g. {key: ..., data: ..., style: ...} object from the styles array, identified by key, that was present during a previous render, and that is now absent, thus triggering the call to willLeave. Note that the style property is exactly what you passed in styles, and is not interpolated. For example, if you passed a spring for x you will receive an object like {x: {stiffness, damping, val, precision}}.

  • Return: null to indicate you want the TransitionStyle gone immediately. A Style object to indicate you want to reach transition to the specified value(s) before killing the TransitionStyle.

- didLeave?: (styleThatLeft: {key: string, data?: any}) => void

Optional. Defaults to () => {}.

  • styleThatLeft: the {key:..., data:...} that was removed after the finished transition.
- willEnter?: (styleThatEntered: TransitionStyle) => PlainStyle

Optional. Defaults to styleThatEntered => stripStyle(styleThatEntered.style). Where stripStyle turns {x: spring(10), y: spring(20)} into {x: 10, y: 20}.

  • styleThatEntered: similar to willLeave's, except the TransitionStyle represents the object whose key value was absent during the last render, and that is now present.

  • Return: a defaultStyle-like PlainStyle configuration, e.g. {x: 0, y: 0}, that serves as the starting values of the animation. Under this light, the default provided means "a style config that has the same starting values as the destination values".

Note that willEnter and defaultStyles serve different purposes. willEnter only triggers when a previously inexistent TransitionStyle inside styles comes into the new render.

(No onRest for TransitionMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.)


FAQ

  • How do I set the duration of my animation?

Hard-coded duration goes against fluid interfaces. If your animation is interrupted mid-way, you'd get a weird completion animation if you hard-coded the time. That being said, in the demo section there's a great Spring Parameters Chooser for you to have a feel of what spring is appropriate, rather than guessing a duration in the dark.

  • How do I unmount the TransitionMotion container itself?

You don't. Unless you put it in another TransitionMotion...

  • How do I do staggering/chained animation where items animate in one after another?

See StaggeredMotion

  • My ref doesn't work in the children function.

React string refs won't work:

<Motion style={...}>{currentValue => <div ref="stuff" />}</Motion>

This is how React works. Here's the callback ref solution.

GitHub

https://github.com/chenglou/react-motion
Comments
  • 1. Implement a basic animation loop.

    I have adapted this from a project I started working on a few days ago.

    The animation loop has the following features:

    • Decoupled stepping from rendering so that stepping can be done using a constant time step which is very important in any numerical integration.
    • API that allows passing in pure functions.
    • Pauses when browser tab is not visible (more accurately when the ticker is called too infrequently).
    • Stops automatically when there are no more animations to run.
    • Supports rendering with interpolation.

    I would really appreciate some feedback to make sure we take this in the right direction.

    API

    import createAnimationLoop from './src/animationLoop';
    
    const animationLoop = createAnimationLoop({
      // Fixed time step in seconds.
      timeStep: 1/60,
    
      // Slow-mo anyone? Give 0.1 a try.
      timeScale: 1,
    
      // Pause if we have more than this many steps worth of accumulated time.
      maxSteps: 10,
    
      // Function that gives the current (relative or absolute) time.
      getTime: performance.now.bind(performance),
    
      // Function that calls our loop when a frame can be rendered.
      ticker: window.requestAnimationFrame.bind(window)
    });
    
    const stepFn = (timeStep, state) => {
      // compute next state
    };
    
    const renderFn = (alpha, nextState, prevState) => {
      // render interpolated state
    };
    
    // Register a simulation/animation.
    const unsubscribe = animationLoop.subscribe(stepFn, renderFn, initialState);
    
    // Start the loop. Noop if the loop is running.
    animationLoop.start();
    
    // Whenever we decide that our animation has finished,
    // for example when the speed is 0.
    // The loop stops automatically if there are no other running animations.
    unsubscribe();
    

    Explanation

    This library is basically a very simplified physics simulation engine for React. Because of this we can learn from what others have done in the gaming industry.

    I have done quite a bit of reading on the subject and looked under the hood of a number of game engines before writing this animation loop. Here are some good articles on the subject.

    So what is the animation loop? The animation loop is the heartbeat of our engine and is responsible for calling the function that updates our physic simulation whenever a frame can be rendered. One update cycle is called a step and in the case of browsers requestAnimationFrame dictates when a frame can be rendered.

    At any given step, a physics simulation, just like this library, uses numerical integrations to compute the state of the “world” from the previous step’s state. As such, this state is only an approximation of how a similar system would behave in the real world.

    In order to ensure the stability of the system and to have accurate integrations it is important to do the stepping in fixed time increments or fixed time step. The problem with requestAnimationFrame is that it gets called at irregular (many times dramatic) intervals.

    Step

    In order to solve this problem stepping needs to be decoupled from rendering. The way this works is whenever rAF is called we accumulate time. When enough time is accumulated we advance our simulation. If for example at any point in time we have accumulated 35ms and our chosen time step is 16.6ms then the system will advance by 2 steps in one frame.

    Render

    When it’s time to render, we inevitably run into an awkward situation where our world stays the same for 2 frames in a row when not enough time accumulates to make a step. Many times this is followed by a frame in which two steps are made. This leads to an irritating jitter when rendered. The solution is straightforward though. Knowing the current and previous state as well as the unused accumulated time, we can interpolate all values resulting in buttery smooth animations.

    Time Step

    The time step has a direct impact on the progression of the simulation. The lower the time step, the more accurate and stable the simulation gets. The higher the time step, the more brittle it becomes. In my experience the system becomes very unstable at any time step above 1/20 seconds or 0.05 ms with objects flying everywhere and does not noticeably improve accuracy for time steps below 1/120 seconds or 0.008 ms. Remember changing the time step does not mean a change in the rendered FPS. It just means the simulation does more or less steps per frame. What it does mean however, is that it impacts performance. A higher time step means more performance at the expense of stability and accuracy. I think a safe bet is a time step of 1/60.

    Reviewed by iclanzan at 2015-07-12 21:45
  • 2. New name!

    React-animation is taken on npm. Let's find a better name for it.

    Current suggestions:

    • React-Spring (not sure, we might add Decay component later)
    • React-Motion
    • React-Move
    • Reanimation
    • React-Tween
    Reviewed by chenglou at 2015-07-07 19:03
  • 3. Tell when animation is finished

    Sort of related to #100

    It is OK now to check current value if you are using default spring preset. But if I am using something like wobbly and animate height, I can easily get zero height while animation is far from being finished (then it goes to negative height, but that is a different story).

    So if I think that my animation is done when height equals 0 and want to unmount element, that is not actually true and on next RAF component is shown again but with a very little height. And again and again.

    animation-end

    I am pretty sure we had this discussion somewhere else, but could not find a separate issue for this.

    I would like to see API in this way:

    <Motion>
      {(style, {isFinished}) => console.log(isFinished)}
    </Motion>
    

    Passing another object to render function will not break current API, and will potentially allow us to pass more fields, not only isFinished but exposing some RM internal state (maybe related to #219)

    Reviewed by nkbt at 2015-11-02 23:03
  • 4. Add [email protected]

    I don't intend for this to land until after I've used it and made sure we're solving the right problem, but I'm opening this now so @chenglou can play with it (and maybe add Flow if there are places I've missed).

    See also #235.

    Reviewed by appsforartists at 2016-01-28 03:51
  • 5. New Spring API draft

    This only concerns animating a single spring for now. I need to prototype a bit more on the springs with dependencies (e.g. chat heads, where the destination of the second head is the current position of the first head) and TransitionSpring, but I think this new Spring is cool enough to stay even if the other solutions don't work out. (props names are temporary. Not important right now)

    <Spring to={{top: 10, left: 20}}>Hi</Spring> That's your new basic spring. It renders to a div and transfers all the props. to is constrained to recognized CSS attributes (will provide injectable defaults for different platforms). Will intelligently not interpolate non-interpolable/unrecognized attributes. A few major advantages:

    • Does manual DOM manipulation under the hood and skips React's render (a-la Animated). Better perf and since this spring's a very common use-case, lots of potential perf boost here. Heck, screw all of this, let's just use Velocity.js or something under the hood =).
    • Can interpolate from height: auto; by reaching into the DOM to set an initial value. #62
    • Color interpolation (color, backgroundColor) comes for free without needing to expose a helper. Same for interpolating "10%" strings. #85
    • Spring precision/error margin are implicitly configured; e.g. left will be rounded to integer and when the spring wobbling distance is around 1 px we'll stop right away because there's no point to keep going. #100.
    • Interpolating many springs: none of our business anymore. map through some random arrays and return your Spring with the desired configuration each time. This is not true for dependent springs. I'm still thinking of a clean API for that.
    • No more vendor prefix, e.g. if you provide transition, we'll add WebkitTransition for you under the hood.

    To configure the spring stiffness and damping: <Spring to={{top: config(10, 120, 17), left: 20}}>Hi</Spring> 120 being stiffness and 17 being damping. Function params format subject to change depending on what's concise and clear. If every attribute has the same config, we could accept a config prop on the spring itself for convenience. What the return value of config(10, 120, 17) is doesn't matter. You don't really read into the anyway. This also kills the special config: [] to signal that you want to jump to the final value straight away. We could provide a clearer stop(destValue) instead. Again, name and signature subject to change.

    An initial prop is exposed (equivalent of defaultValue right now).

    As you can see, it's not that much of a departure from the current basic Spring API: you were probably already using something similar. I'm having a bit of trouble figuring out how the perf that comes from skipping render will cooperate with dependent springs or TransitionSpring (seems like with a child-function you kind of have to re-render the wrapper every time), brainstorming welcome.

    Reviewed by chenglou at 2015-08-11 08:35
  • 6. Adding a child to another component during an animation throws error

    I have the following (simplified) structure:

        <DumbWrapperComponent>
          <Messages/>  (listens to MesagesStore)
          <OtherUI/>     (listens to UIStore)
        </DumbWrapperComponent>
    

    Messages and OtherUI have two distinct stores they're listening to, so they (should) render independently of each other. OtherUI has some draggable elements using ReactMotion for smooth animation and an 'Add Message' button which adds a message to Messages using Flux pattern. It all works fine except for a case when you click the 'Add Message' button quickly after dragging something so the animation is still running. I get "Error: Invariant Violation: Expected flush transaction's stored dirty-components length (1) to match dirty-components array length (2)"

    I'm going to check it more thoroughly in a second and update/close if I find the solution but I thought I'd ask just as a sanity check - is this an expected and known behavior/limitation of React Motion?

    I'm still using v0.2.7 if that matters.

    Reviewed by koko236 at 2015-10-18 15:55
  • 7. Name of animation end callback

    Context: implementing/implemented callback for when a component finishes transitioning. We're not sure yet whether the callback will be applied on the whole component, on the a single style object, or per style value (current implantation for Motion is on the whole component/style object (same thing for Motion since a Motion component has a single style obj), so keep that in mind if you want a future-proof name for this (or not. Maybe it's better to have a specific name for our current implementation, and a different one for a different, e.g. per-value callback).

    Potential names:

    • onEnd
    • onRest
    • onDone
    • onStop
    • onFinish
    • ???

    Go ahead!

    Reviewed by chenglou at 2016-01-30 06:19
  • 8. Testing base, ES6 coverage report

    As part of #13. Independent from the code itself. Only had to fix same syntax issue in Spring, since parser crashed on that one.

    When lib files are moved, these configs should be updated accordingly, but for the moment everything works fine.

    Reviewed by nkbt at 2015-07-07 11:44
  • 9. Restructure API docs to use better type signatures

    I was having a great deal of trouble understanding the API, so I've attempted to make the type signatures much clearer in the docs. I may have got some things wrong though. I originally stuck to the Haskell-esque syntax for the type signatures, but opted to switch to TypeScript syntax because it allows you to annotate the function parameters. I hope this helps!

    Rendered

    Reviewed by brendanzab at 2015-10-09 02:43
  • 10. Traditional curve/duration animation

    Hi Chenglou,

    Here are my thoughts after integrating the Spring API yesterday:

    • Users of my components will have trouble understanding stiffness/damping compared to the slightly more intuitive and common curve/duration.
    • In some instances the Spring animation doesn't return to a stable state.
    • Would be great to see some predefined constants like you get with most curve animation libraries (e.g. stiff_spring, wobbly_spring).

    I love the API design but would really like to have the choice to use a Tween object. I know it's got issues like you mentioned in the React-Europe talk but I don't think it would hurt to provide a traditional approach to animation as well.

    let Demo = React.createClass({
      getInitialState() {
        return {open: false};
      },
    
      handleMouseDown() {
        this.setState({open: !this.state.open});
      },
    
      render() {
        return (
          <div>
            <button onMouseDown={this.handleMouseDown}>Toggle</button>
            <Tween endValue={{val: this.state.open ? 400 : 0, config: [EasingTypes.easeInOutQuad, 2]}}>
              {interpolated =>
                <div className="demo0-block" style={{
                  transform: `translate3d(${interpolated.val}px, 0, 0)`,
                }} />
              }
            </Tween>
          </div>
        );
      }
    });
    
    Reviewed by twobit at 2015-07-15 17:51
  • 11. Theoretical: Timeline Rewind/Replay Implementation

    I think the best way to move animation forward in react is to make it dead simple to experiment with the animation on a set of potentially multipage actions.

    For example, let's say I have an admin panel, I have a certain flow to getting from listing to a form and then performing an action and I want to set some nice animations for doing all that, ideally by setting a crude version then experimenting by recording and replaying back.

    This can potentially benefit more then just the developer.

    For simplicity sake, lets assuming we have the following, as their not that hard (probably) and some technologies related to them are still surfacing as we speak or in their growing stages (eg. baobab v2).

    • a single application state tree like structure (eg. baobab) that holds all the data in the application
    • we save animation configuration exclusively in the tree structure and its inteded to be constant for the lifecycle of the application (except when we're intentionally editing in development)
    • we have a timeline system that can save all changes made to said structure from one predefined start point to a predefined end point
    • we have a simple interface for viewing and editing nodes in the tree (ie. for our purposes mainly animation configuration nodes)
    • we can reset the entire state with out any page reload and we can also save to localStorage and reload

    Problems & Questions

    How could we go about saving animation state to said structure? (with out key paths everywhere) How can we go about triggering animation state from said structure? How can we go about storing animation configuration in the state structure? How can we go about reading in a human understandable format the configuration from the tree? How can we go about resetting everything? (ie. stop/replay) How do we handle animation that's applied to many items? (ie. shared components that appear in multiple areas)

    Reviewed by srcspider at 2015-07-12 11:55
  • 12. Bump karma from 2.0.4 to 6.3.16

    Bumps karma from 2.0.4 to 6.3.16.

    Release notes

    Sourced from karma's releases.

    v6.3.16

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    v6.3.15

    6.3.15 (2022-02-05)

    Bug Fixes

    v6.3.14

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    v6.3.13

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    v6.3.12

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    v6.3.11

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    ... (truncated)

    Changelog

    Sourced from karma's changelog.

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    6.3.15 (2022-02-05)

    Bug Fixes

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    6.3.10 (2022-01-08)

    Bug Fixes

    • logger: create parent folders if they are missing (0d24bd9), closes #3734

    ... (truncated)

    Commits
    • ab4b328 chore(release): 6.3.16 [skip ci]
    • ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"
    • c1befa0 chore(release): 6.3.15 [skip ci]
    • d9dade2 fix(helper): make mkdirIfNotExists helper resilient to concurrent calls
    • 653c762 ci: prevent duplicate CI tasks on creating a PR
    • c97e562 chore(release): 6.3.14 [skip ci]
    • 91d5acd fix: remove string template from client code
    • 69cfc76 fix: warn when singleRun and autoWatch are false
    • 839578c fix(security): remove XSS vulnerability in returnUrl query param
    • db53785 chore(release): 6.3.13 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-02 03:46
  • 13. Bump chownr from 1.0.1 to 1.1.4

    Bumps chownr from 1.0.1 to 1.1.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-11 05:15
  • 14. is react-motion dependent on using jsx?

    Can I use this library if I'm not using jsx? I couldn't figure out the correct syntax to make it work.

    if anyone can share an example of using ie. Motion without jsx please share.

    Reviewed by yukanagai at 2022-01-19 02:24
  • 15. Bump tar from 4.4.4 to 4.4.19

    Bumps tar from 4.4.4 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-01 03:43
  • 16. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-10 23:34
  • 17. Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-27 10:00
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Jun 19, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Jun 18, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Jun 22, 2022
This application contains end to end non blocking reactive flow. From Bankend( Database, Spring) and FrontEnd Angular

SpringReactiveApp This application has following projects Spring boot reactive with Mongo Database Angular with EventSource for reactive(non-blocking

Oct 26, 2021
React App with games using animations (react-spring)
React App with games using animations (react-spring)

Teddy games https://pylnata.github.io/teddy/ React App with cartoon animations and games for kids. Developed just for fun and to learn React-spring li

May 17, 2022
High-performance spring animations in React

React Rebound A spring-based React animation library that animates elements directly in the DOM for maximum performance. Hooks and component-based API

Apr 24, 2022
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.

react-spring-lightbox React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations. Doc

Jun 11, 2022
WeDelivery - A Spring and React based dispatch & delivery management application.
WeDelivery - A Spring and React based dispatch & delivery management application.

WeDelivery WeDelivery is a Spring and React based dispatch & delivery management application. Our service is to use robots and drones to help users in

Mar 14, 2022
Project build: REACT CREATE APP / REDUX / REDUX-TOOLKIT / REACT-SPRING / SCSS

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. designed by Om Arya Available Scripts In the project

Jun 22, 2022
AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app
AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app

Add motion to your apps with a single line of code. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web a

Jun 27, 2022
Animation engine designed for React
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

May 22, 2022
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

Jun 15, 2022
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

React Flip Move This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transit

Jun 23, 2022
Open source, production-ready animation and gesture library for React
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Jun 18, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

May 22, 2022
React particles animation background component
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Jun 23, 2022
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

Jun 24, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Jun 13, 2022
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

May 30, 2022