Provide math equations
WebFreak001 opened this issue ยท 8 comments
the visualization for easings is really useful, but needing to look up the equations how to implement them elsewhere is kind of missing the point.
It would be cool if there were code snippets for supported easings, for example under the images comparing linear with the easing function.
Usually I look at http://www.gizma.com/easing/ for reference, but I like the visualization of easings.net better. However because the code snippets on the other site are very easy to all see and copy, I usually go there instead.
Maybe it should be written more as pseudo-code with better variable names or just pure math equation though to be better understandable to everyone.
Why do you need these examples?
How will these examples help other users?
well when I lookup the easing methods, I look for equations how to make my programmatic animations which use some time value 0-1
better than just linear animations. It's basically for anyone writing any simple transitions etc. outside of css
I just stumbled on easings.net when I was trying to find the functions with respect to t for the easings I wanted. I was looking to incorporate an easing config in react-spring where the docs state:
Property | Value |
---|---|
easing | t => t |
I used easings.net to find which animation I liked the best but had to look in the source code of d3.easing to find the actual mathematical function to put them in.
tl;dr As someone who has just started working with animation in detail, I found this site useful but still ended up having to go to another site just for actual math in a library that needs the function.
any reason on closing?
This site helps in finding CSS Animations.
I think what @isolovev is saying is that the purpose of this site is to help with CSS animations only rather than be a catch-all for every animation easing related purpose. Although I would find the inclusion of the math equations to be relevant, the decision to not do so is purely the prerogative of one of the core maintainers of the site.