search

codepunkt / css-spring

Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css.
MIT License
314 stars 15 forks source link

Issues with css values with () #13

Open wedelgaard opened 7 years ago

wedelgaard commented 7 years ago

First of all, awesome little plugin! I've noticed that passing spring start and target values with () seems to break the code. At least thats my assumption.

Uncaught TypeError: Cannot convert undefined or null to object : css-spring.js:647

Lets say I want to translateX(50px), this won't work. I know I could use the "formatter" to fix this issue, but it would be awesome to just have start and target to be plain style objects.

codepunkt commented 7 years ago

@wedelgaard thanks!

I agree, being able to simply use translateX(50px) in start or end styles would be great. For the time being, i recommend using a custom formatter to animate transforms.

Apart from that, i see two ways to resolve this without having to resort to formatters:

  1. Hand-coding support for transforms, or specifically, translate or translateX. Might even be more generic by targeting css values that consist of interpolatable values in between parentheses. This would be possible with the current code-base, but it would lead to a larger footprint of the library and quite possibly, harder to understand code
  2. Changing the whole project to use a css parser on both start and end styles, built abstract syntax trees for both, identify matching interpolatable values and interpolate based on those. That's a whole different can of worms and i have to admit that i don't have the best understanding of ASTs or css parsers, in general. I'm not even sure if CSS parsers exist that split property values into their integral parts.

Help and pull requests are always welcome!

wedelgaard commented 7 years ago

I'ved found out its actually the regex in line 439 that seems to be the problem:

var regex = /^([+-]?(?:\d+|\d.\d+))([a-z]|%)$/

This regex won't catch "translate(50px)"

I'll try to look into it if I get the time :)

codepunkt commented 7 years ago

Started playing around with a css parser based version in next branch.

wedelgaard commented 7 years ago

@codepunkt uh nice will look forward to it ;)

jjenzz commented 3 years ago

Is this project still maintained? I notice the last updates were several years back now but I'd love to play with this and I've been struggling to get transforms working using the object syntax. The example in the repo doesn't appear to work either:

https://codesandbox.io/s/affectionate-villani-y30kz?file=/src/index.js:680-712

Cannot use 'in' operator to search for '0' in transform: translateX(100px);

I can't use the formatter from toString because I need an object representation of the keyframes to pass to a CSS-in-JS library.

Thought I'd post in case it was a simple fix 🙂

codepunkt commented 3 years ago

Not maintained anymore. Feel free to pull request a bugfix.