Add a Bouncy-Ball Demo using ReactMotion

[bryanbraun]

Add a bouncy-ball demo using React Motion.

This would be a good contribution for somebody familiar with ReactJS and React Motion.

A few tips for making this:

1. Start by duplicating the /examples/template folder, renaming your copy to something like react-motion, and creating the animation in /examples/react-motion/index.html
2. Look at the other demos for reference parameters. For example, you can find details on ball-size, bounce height, easings, cubic-bezier functions, and more.
3. Once the demo is working on /examples/react-motion/index.html you can bring it into the main page by adding a new <input> and <label> for it in the selection bar.

See contributing.md for details on the development / contribution workflow.

[lavish205]

Hi @bryanbraun I'm not much familiar with ReactJS and React Motion, but little guidance will be very helpful to solve this bug.

[rajington]

I could do this but the displayed source would be done the "React" way using ES6/JSX, and the actual code would be transpiled. It's possible to not use ES6/JSX so the source matches the display, but I don't think that's what you really want.

[bryanbraun]

@lavish205, I'm not too familiar with those technologies either, so I can't provide detailed guidance on the implementation.

@jrasanen, good point.

Originally, I didn't want transpiliation steps in the demos, but you're right, I think we could/should make an exception for this one (since it's the "React" way).

And you're right, I'd want to show the ES6/JSX in the source pane, while the demo itself runs on transpiled ES5.

I think the best way to do this is to put the ES6 inside script.js since that's what will be pulled into the source pane. We can have a separate, transpiled file (script.transpiled.js?) that gets included into /examples/react-motion/index.html.

Also, I'd say, don't worry about including a build step in the project itself. We can transpile the code from es6/JSX -> es5 using an external tool, to prevent complexity.

[rajington]

Sounds great, I checked out how SVG was added and I'll do something similar.

[rajington]

I checked out React-Motion more, and the library was really built around untimed animations for UI, specifically "spring"-y animations with stiffness and dampening. You mainly enter a start/end and it creates a lifelike animation for you. I messed around reversing a spring animation when the animation ends (svg example), but I'm worried that it's not really what React-Motion was built for and it would create a contrived example.

I could still do a React example, but I'd use a simple javascript easing function to supply the components height, rather than using React-Motion. It'd be pretty close to the Vanilla JS example, which I guess is kinda the point of React. It's also common to do some animations in CSS, but then it'd be close to the CSS example, and here's an example that even uses GSAP's TweenMax.

Sorry for assuming the React-Motion was more of a generic animation library, I've only used it in the past for page transitions.

[bryanbraun]

@rajington, thanks for looking into this. Yeah, I was thinking it was more of a generic animation library as well. 😕

We could wrap one of these other examples in React, but at that point, I don't think it would be a very useful animation comparison.

I think this investigation was helpful, but I don't see any more code work necessary here, so I'm thinking we'll close this issue.

[rajington]

The core arithmetic of the code uses Vanilla.js but there are some interesting things when using React, so I thought I'd submit a PR anyway.

[bryanbraun]

Ok. I'll take a look. 👍

[bryanbraun]

Fixed in #25. Closing.