Update the keyframes on state update

[tjebbemarchand]

Environments

• Framework name: ReactJS
• Framework version: 18.1.0
• Moveable Component version: 0.39.2
• Scene Component version: 1.1.0
• Testable Address(optional):

Description

We have build an application sort of like Figma, where you can create and drag layers around. We can give those layers some styling. And also, we can create animations on those layers. For this, we are creating keyframes and passing that to the Scene React component.

{ ".rectangle_OvnRKtiTq.halfpage": { "0": { "visibility": "visible", "transform": "translate(38px, 197px)" }, "5": { "visibility": "visible" }, "options": { "easing": "linear" } } }

But in order for this to work properly, we have to pass a key prop and update that every state change (so every time we drag a layer), so the Scene component will remount itself. This works, but then the Scene component and all of its children, including the layers, will also remount. This gives a flickering result to the layers because it has to load in the image and video layers as well.

If i remove the key prop, then the flickering goes away, but then the animations doesn’t update properly.

Is there a way to update the Scene component with the new keyframes without remounting? Or does Scene not support this? Does it only read the keyframes on componentDidMount and not on componentDidUpdate?

I hoped I explained it correctly. Thanks in advance for your response.

[daybrush]

@tjebbemarchand

Unfortunately, only in mount.

Dynamic options are not yet supported.

For dynamic updates, use the set function.

const {
   set
} = useScene or useSceneItem or useFrame


set({ ".rectangle_OvnRKtiTq.halfpage": { "0": { "visibility": "visible", "transform": "translate(38px, 197px)" }, "5": { "visibility": "visible" }, "options": { "easing": "linear" } } })

[tjebbemarchand]

@daybrush

Thank you for your answer! I will look into this probably tomorrow and see if your suggestion works.