Repository navigation
Issues with css values with () #13
Description
Activity
@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:
- Hand-coding support for transforms, or specifically,
translateortranslateX. 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 - 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!
- Hand-coding support for transforms, or specifically,
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 :)
Reacted by Christoph WernerStarted playing around with a css parser based version in
nextbranch.Reacted by Michael Falck WedelgårdReacted by Michael Falck Wedelgård@codepunkt uh nice will look forward to it ;)
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
toStringbecause 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 🙂
Not maintained anymore. Feel free to pull request a bugfix.
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.