pmndrs / react-spring.io

✌️ A spring physics based React animation library

react-spring.io

This repo has been archived. We have since moved all the documentation to react-spring. For any contributions, please make them there!

react-spring.io's Issues

Document shorthand/shortcuts for css transform properties.

🚀 Feature Proposal

The shorthand for <animated.div style={{translateX}} /> syntax does not seem to appear anywhere on the documentation website.

Motivation

This is rather confusing because I ran into this syntax on a PR today and thought that it was an invalid style key since translateX is a css function of transform -- not a style property. Personally, I dislike shorthand like this since it can lead to more confusion/bugs if the top-level child returns is an <animated.div>

// in some other file
function MyComponent({style}) {
  return <animated.div style={style}>Hello!</animated.div>
}

// This would appear to be invalid to me since there is no indication
// that `MyComponent` is an `animated.div` and supports this style key.
function MyScene() {
  return <MyComponent style={{translateX}} />
}

It might be worth considering whether-or-not these shortcuts should be supported at all, but there should definitely be more visibility on them for when folks run into them in the wild.

Is onDestroyed meant to be deprecated in v9, if so - what replaces it?

🐛 Bug Report

I have read that onDestroyed has been removed in v9. https://aleclarson.github.io/react-spring/v9/breaking-changes/#The-sort-prop - however, the Typescript definitions still have it, and it fires callbacks.

• Should this have been removed, or is this prop missing in the new documentation?
• What is meant to be used instead on this prop if is being removed?

To Reproduce

The prop is called here: https://github.com/pmndrs/react-spring/blob/9568020efb64addb97816232759528a7681ed97c/packages/core/src/hooks/useTransition.tsx#L110

Environment

• react-spring v9.

useTransition does not return a function in v9

I'm just trying out react-spring@next v9 rc3, and I was following this guide: https://aleclarson.github.io/react-spring/v9/breaking-changes/

This seems to indicate that useTransition will return a function that I can invoke (instead of an array to map to react components).

const transition = useTransition(items, {
    from: {
      y: 0,
    },
    update: (item, itemIndex) => {
      return {
        y: hoveredIndex === -1 ? 0 : itemIndex === hoveredIndex ? 0 : -50,
      };
    },
  });

  const fragments = transition((style, domain)=>{/*removed because not relevant*/}

Which will end up giving me following exception:

TypeError: transition is not a function
    at DomainSelector (http://localhost:6006/main.d556d818920dd0d1f217.hot-update.js:43:21)
    at renderWithHooks (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2546:153)
    at mountIndeterminateComponent (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:2831:885)
    at beginWork (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3049:101)
    at HTMLUnknownElement.callCallback (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:70:102)
    at Object.invokeGuardedCallbackDev (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:90:45)
    at invokeGuardedCallback (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:105:126)
    at beginWork$1 (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3934:1)
    at performUnitOfWork (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3734:177)
    at workLoopSync (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react-dom/cjs/react-dom.development.js?:3730:45)

Code sample text color is white on white

Add a section about the various entry points

As mentioned in this comment, there's some confusion about what each bundle is meant for (especially universal and cookbook). We should add a page dedicated to the various supported bundle types.

Please help to find documentation for v8

Hello!
Thanks for great library, we use version ^8.0.27 and after recent major update its documentation is gone.
Can you please publish v8 docs somewhere?

✨ SUGGESTIONS ✨

I'm in the process of updating the docs, but we want to know the pain points.

• What would make these docs better?

• Maybe you want to share what your pain points were in getting started?

• Maybe you just have a wicked idea you want to share?

Constructive feedback will be loved, mean comments will be hidden.

The "lazy" prop of useTransition is undocumented

Use react-live or similar for the examples

react-live is a "production-focused playground for live editing React code".

It should simplify the existing workflow on updating examples and I think it also make more easy for people to play with them.

Motivation

This week I've implemented a swipe-to-delete component with react-spring and it was kinda painful to learn since the gesture slider example still uses the old react-with-gesture api instead of react-use-gesture.

Forking the repo to update the gesture examples I've felt like it is over-complicated to update the code and it is not clear how to update the codesandboxes.

If the idea is welcome I'm willing to propose and develop a new examples setup.

Any thoughts ?

Fix mobile layout

An attendee at React Europe showed me how react-spring.io looks on mobile, and it's kinda broken.

config.decay prop should be effected by friction

Proposal/Question - When creating a drag animation in which releasing the object results in conservation of momentum through the use of velocity and decay configs, should friction (or some other config related to decay) should determine how fast the velocity decays?

https://codesandbox.io/s/lucid-tdd-57cqy

Viewing this example, I would expect increasing the value of friction should result in the slow down of the object faster.

Woops! Opened in the wrong repo. I'll move to the correct project :)

Warnings and Contributing Guides

I started up a local instance of the docs and realized there are many errors and a lack of documentation for contribution, I'd love to contribute.

Console:

Can I take on this issue of cleaning up the warnings and adding a proper readme and contributing guide?

Fix or remove Controller example on "Gotchas" page

The Controller example on the "Gotchas" page is incorrect. We should remove or fix it.

https://www.react-spring.io/docs/props/gotchas

Reported by: pmndrs/react-spring#642 (comment)

Update the renderprops API docs

In v9, the renderprops API no longer re-renders on every animation frame, so you need to use animated.div instead of a plain div element.

Reported by @QuietNoise here:
pmndrs/react-spring#743 (comment)

"interpolate" function is undocumented

Better documentation needed to migrate velocity props from v8 to v9

🐛 Bug Report

The Velocity prop has changed for v9 and the changelog does not mention it

To Reproduce

A value of 1 in v8 will need to be changed to 0.001 in v9.

Expected behavior

This should be in this guide: https://aleclarson.github.io/react-spring/v9/breaking-changes/

Change to library is here: pmndrs/react-spring@d5ad40f

Where i can found the react-spring v8.** documentation (old react-spring.io)

🤓 Question

I have a lot of packages depend on react spring 8.0.27, so i can't upgrade to v9.0.0, i'm wondering why you can't keep the old documentation accessible ex. react-spring.io/doc/v8 or somthing

Add some guides

Everyone is encouraged to help out with these tasks:

• Add a "guide directory" page
• Write a short guide for getting started with each target platform (eg: web, zdog, three)
• Convert solved questions from https://github.com/react-spring/react-spring/issues into guided implementations
• Write a short guide about how you fixed a broken animation while learning react-spring

It would be great if the guides used react-live!

TypeScript usage guide

https://www.react-spring.io website is down

Hello, guys
I am trying to find documentation but documentation website is down
accessing from Gujrat, India.

Looping a Trail Component

What is the proper way to loop a Trail in v9.0? I've had success with the loop prop for Springs but I'm having difficulty using it with a Trail.

const paths = [...]

<Trail
   loop
   items={paths}
   from={{ opacity: 0.2, y: 0, stroke: 'rgba(255,75,75,1)'}}
   to={{ opacity: 1, y: 30, stroke: 'rgba(80,80,80,.35)'}}
>
   {(item, index) => ({ y, opacity, stroke }) => (
      <animated.path
         style={{
            opacity,
            transform: y.interpolate(y => `translateY(${ y}px`),
         }}
         d={item}
         fill="black"
         stroke={stroke}
         stroke-width={3}
      />
   )}
</Trail>

This code runs the full animation once, but on subsequent loops, only the first few elements in the array are animated. I've tried playing around with delay and duration and it seems to improve the animation somewhat but the latter items in the array only partially animate. I also tried initially setting loop to false, then toggling it to true in the onRest function, but this doesn't loop at all.

Memory leak on examples page

Might be a react-spring leak 😳

• Goto https://www.react-spring.io/docs/hooks/examples
• Start heap profiler?
• Leave it open until it crashes?

The "config.decay" prop is undocumented

It should be added here: https://www.react-spring.io/docs/hooks/api

Reported here: pmndrs/react-spring#645 (comment)

[Request] Add integration example with Reach Router

Hi! @drcmda I was wondering if you have examples with Reach Router. Here's what I have so far, appreciate the help!

import React, { useState } from 'react';
import { Router, Location } from '@reach/router';
import { useTransition, animated } from 'react-spring';
import { Container } from '../global';
import styled from 'styled-components';

const AnimatedContainer = styled(animated(Container))``;

const AnimatedRouter = ({ children }) => {
	const [index, set] = useState(0);
	const transitions = useTransition(index, p => p, {
		from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
		enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
		leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
	});

	return (
		<Location>
			{({ location }) => (
				<AnimatedContainer key={location.key}>
					<Router location={location}>{children}</Router>
				</AnimatedContainer>
			)}
		</Location>
	);
};

export default AnimatedRouter;

Document recommendations for building accessible animations

In pmndrs/react-spring#811, a cross platform useReduceMotion hook was proposed. It was decided this would best live in user-land.

The original post on that issue outlines the importance encouraging devs to make accessible animations. Since making that proposal, I have shipped https://github.com/infiniteluke/react-reduce-motion, a cross platform solution for hooking into users' "Reduce motion" OS preference.

Documenting this approach and making a recommendation on the official react spring site is a good idea because it will provide visibility about the importance of accessibility and will empower devs to understand that it's not so hard to support!

Where should this live in the react-spring.io site?

Here are a couple options:

Option 1

This is nice because it is very visible and will remind people about accessibility from the start when learning about react-spring. This is my preference, but maybe I'm biased.. 😉

Option 2

This option may be preferable if you all want the recommendation to be less prominent.

Once it is decided this is an acceptable idea and the location is determined. I can open a PR and we can discuss the verbiage.

Thanks!