search

dbramwell / react-animate-on-scroll

React component to provide animations when the user scrolls
590 stars 72 forks source link

Customize Animation Easing #45

Open brybrophy opened 6 years ago

brybrophy commented 6 years ago

Hello. I'm loving this package so far. We switched from react-spark-scroll and the performance/ease of use is night and day.

It would be a great enhancement to allow the developer to choose a custom easing function. I believe that one could currently use the style attribute in React to set animationTimingFunction like so:

style={{ animationTimingFunction: ease-in-out }}

This works fine, but adding an easing attribute would be an easy enhancement. It would something like this:

easing="ease-in-out"

dbramwell commented 6 years ago

Hello. I'm loving your feedback so far.

This sounds like a perfectly reasonable request. Just a case of adding it to the this.state.style. If you fancy having a go and creating a pull request that'd be great, maybe with a small test case to assert that the animationTimingFunction is applied to the style of the rendered component, similar to this (excuse the mess in the tests file, it needs a bit of a clean and splitting up)

Failing that I'll add it in when I get chance.