Plx does not render startValue and endValue values that are 'string' based units

[aldenfbrown]

Hello Stanko,

My project requires string based transforms for the CSS properties although it appears the logic on lines 327 and 333 are preventing this use case with the following parallaxData array.

const parallaxData = [
    {
        start: 0,
        duration: 500,
        properties: [
            {
                startValue: 0,
                endValue: '50%',
                property: 'translateY'
            }
        ]
    }
];  

Expected: Plx should render startValue and endValue values that are 'string' based units (50px, 50%, 25vh).

Actual results: Plx does not render startValue and endValue values that are 'string' based units (50px, 50%, 25vh).

Plx, ERROR: endValue is not a number (type: "string", value: "100%")

Thanks in advance, Alden

[Stanko]

Hello @aldenfbrown, At the moment, Plx unfortunately supports only numeric values for startValue and endValue. String values are only allowed for colors (i.e. #234 or rgba(200, 100, 50, 0.5)).

I will look into it, but I'm not sure when I'll have time to do it. Feel free to add a feature yourself, I would gladly accept a PR for it.

Cheers!

[Stanko]

Oh silly me 🙃I actually implemented that already, but you need to pass unit property. In your example it would be:

const parallaxData = [
    {
        start: 0,
        duration: 500,
        properties: [
            {
                startValue: 0,
                endValue: 50,
                unit: '%', // <- this is the catch :)
                property: 'translateY'
            }
        ]
    }
];

Sorry for the misunderstanding!

I implemented it that way to make it easier for the library to do interpolation, without need to parse values every time.

[aldenfbrown]

That's great! I appreciate the quick response and path forward. I would be great if this was added to your example of props array on the readme. Regardless thanks again for getting back to me!

[Stanko]

That makes sense :) I'll add it, thanks!