React-spring: Improve documentation with complete code

Created on 11 Nov 2018  路  3Comments  路  Source: pmndrs/react-spring

In continuation of #290, I have seen doc a little apart from code explanation. I think we should add complete code snippets with reference to each feature react-spring is providing.
In docs, we're using <RewindSpring> Provider with context API. But this isn't visible to beginners as they first jump into official docs. It might be difficult for them to run a simple spring animation by looking at the already provided respective code snippet.

Here is the example that mostly beginners would trying to do:

<Spring from={{ x: 100 }} to={{ x: 0 }}>
{props => ( 
        <svg strokeDashoffset={props.x}>
          <path d="M7 2v11h3v9l7-12h-4l4-8z" />
        </svg>
      )}
</Spring>

by looking it as a reference:

image

I'd to suggest to write a Getting Started.md , demonstrate an example for spring. So user can replicate all other features. Or maybe we can add complete snippets of every reference example we are providing.

I hope you'd like the idea and I'd love to work on it.

Cheers !

documentation

Most helpful comment

Thumbs up.

Coming from other animation engines like Greensock/Tweenmax, there are many things which is not obvious.

All 3 comments

Thumbs up.

Coming from other animation engines like Greensock/Tweenmax, there are many things which is not obvious.

Agreed.
That's why we shouldn't let user to deviate or spend more time to find how to run the basic examples.

A bunch of demos will soon come, i'm making something like a demo page for it.

Was this page helpful?
0 / 5 - 0 ratings