Open cameralibre opened 3 years ago
Some types should be quite straightforward to convert, as they are based upon CSS themselves:
- [ ]
cubicBezier()
➡️cubic-bezier()
Actually this is not straightforward at all, or at least, I can't use the same lookup table approach - there is a small, finite number of Penner's easings, so each one will create a unique fingerprint when run on two values (0.2 & 0.7), and I can be sure that all are covered by hardcoding them in the script.
cubic-bezier()
however, has a theoretically infinite number of variations, and I don't think that just two data points will describe the whole curve.
It might be worth exploring bezier.js to see if it can get control points from given points on a curve
Anime.js provides multiple types of easings.
Some types of anime.js easings are now being converted to CSS ( #2 ):
easeInQuad
,easeOutCirc
,easeInOutQuart
etc) ➡️cubic-bezier()
equivalentsSome types of easing will not work in CSS, so I can't support them:
❎️
easeInElastic
,easeOutBounce
etc ❎️spring
equations ❎️ custom easing functionsSome types should be quite straightforward to convert, as they are based upon CSS themselves:
cubicBezier()
➡️cubic-bezier()
steps()
➡️steps()