[Not a bug] Filter: not working

Hi!
I’m checking the new animation panel.
Seems that is working well with opacity property but is not working with filter.
I attach a video

Hi Marco,

because this data has to be a JavaScript object, your input will not work. Everything which is not numeric, needs to be wrapped by quotes because you pass this as a string.

Not valid

{filter: grayscale(1)}

Valid

{filter: "grayscale(1)"}
2 Likes

That is cool… I was wondering as well because it worked with a numeric value, but not when I added px (I also didn’t add quotes). It being a JavaScript object opens up many options, really great. For example we can now use JavaScript the ternary operator and global functions to return a value based on more complex conditions.

In animation Field, we use can/could use built in functions to set a random position:

{
    x : Math.round(Math.random()*1000),
    y : Math.round(Math.random()*1000),
}

You could also put the entire thing in a global function added in Bricks header scripts:

function randomPosition(){
    return {
        x : Math.round(Math.random()*1000),
        y : Math.round(Math.random()*1000),
    }
}

In animation field ;

randomPosition()

I haven’t tried if functions are currently evaluated (using new Function) yet, or only string concatenated. If only concatenated this hopefully makes a good argument for evaluation.

I also found that the field is small. For some single values okay, but the moment you add more it becomes tight. I would suggest a multiple line field set to the height of one single line instead (, but dragable for more lines).

2 Likes

Great idea using a function to return a custom JS object, Max! Having this in mind, I really would limit you to force to use brackets in this field. What do you think? (See the other thread: Few things for animation panel)

Well, I guess this depends. If you expect this to be an CSS-Object I might also remove the {}, but if it’s a JavaScript Object… hard-wiring the {} doesn’t make sense to me as it limits the possibilities, as seen above. I am trying to think of a way to make everybody happy :slight_smile: … still thinking… if it is for pure UX purposes, I guess a list of value key with +/- would be for no-code people and designer types

CleanShot 2022-11-14 at 11.20.10@2x
Although this doesn’t solve the notion of it actually being JavaScript and quotes, unless list values are always quoted

and a code field with brackets for developer types:

CleanShot 2022-11-14 at 11.21.33@2x

1 Like

If it’s like that I think it’s better to not limit the possibilities.
Maybe a tooltip with a nice explanation (even with a link to the post of the documentation where you explain that super well) can be enough.
Actually I’m thinking that now that I know what it is I will not have the same problem anymore. Then can be something that you just “have to learn”

Another thing is that for people that are not use to code usually they can handle to write css but they can be scared with JavaScript. (Thinking at loud)

1 Like

Agreed! There should be a little :information_source: or help icon. That could solve it and we could leave it as is (maybe multi line, see above)… and the help system could be expanded on having the icons on different places in BricksForge linking back to relevant documentation.

PS: Just looked you up… Me gusta tu música. Crecí en la isla de Formentera.

1 Like

I just realized I teasered the tenary operator above, but haven’t made an example. This is a killer feature base on variables. Hence, if event allows to run JavaSript you can set variables and animations can react to them base on the variable or just use a chaeckbox etc.:

Simple example:

isMobile? {x:40} : {x:150}

More complex example:

document.querySelector('#accept:checked') !== null? {
   opacity: 1
} : {
   opacity: 0
}

Another cool thing is that GSAP allows relative operator if given as a string:

{
    x: "+=20px"
}

And random values are also already built in:

{
    x: "random(-100, 100, 5)"
}

All found in the docs:

1 Like

Max is a legend! :wink:

2 Likes

It is