Animated Keyframes - Custom CSS on two items

I am trying to put custom CSS animation on these 2 boxes. So they can come slide in from right and left. However, when I put custom CSS, the same code is shown when I select either box. ie It seems I can only enter one custom CSS per screen, is that the case? Attaching screens showing settings for these 2 boxes grey & blue, both have same custom CSS code. Is this is bug, or feature limitation?

Second question, in the CSS animation section how do I target the div? It says to use $KEYFRAMES but that doesnt work. I have to go to real code to see name and enter manually. Can you correct me what am I doing wrong?

I want to add to this. Now I noticing this on other components too. That I can net only enter 1 custom CSS in entire project. So when I entered into a totally different component, this prior one got over written too. Very strange.

There’s definitely a bug. We’ll fix it for the next release.

This is a big problem for me too. I’m trying to animate elements on and then off the screen when the state changes. We need much better animation support in React Studio… using CSS animation feels like a hack. Would like to see automatic property transitions between states for a given element. For example I position an element in one state and then move it to another location in a second state. When the state changes the element would automatically slide from its first position to the next. This should work for any property, like rotation, scale, color, etc.

Hi,

Everyone, thanks for the thoughts on this.

We’ve made a decission that React Studio is not a Animation tool so we don’t have plans for adding animation design features to Studio. Anyway we do have plans to add that we’ll add animation plugin API which allows anyone to write custom animations and import those as reusable plugins and attach to elements. There are already animation tools and for us it’s just better to focus on creating “assembly line” for apps rather than design tool for atomic elements or animation tool.

Here are the animation settings at the moment:

Do you have ideas or suggestions how this could be improved so that it would not make a mess if/when animation settings and element size/color/location settings “collide”.

Here’s an example project where component has two states. If you toggle the states the button animation is fired. https://neonto.cloud/preview/7zvp9zr

Hi @juha_neonto thanks for fixing this bug in the new release. I can confirm it is working now.

I have another problem. In the CSS Animation section in React studio, to target the div it says to use $KEYFRAMES to refer to the keyframe. However, it doesnt work. So instead I have to go to the WIP folder, to App.CSS, actually see the name of the div from the Keyframe animation, and put that in this section to make it work.

See screenshot attached to explain more. Is this a bug, or am I doing something wrong here?

Good catch! There’s a bug. It’ll be fixed in the next update.