I am creating a GUI application where users can create property keyframe animations by changing CSS styles and clicking a 'Add Frame' button, they can add as many frames as they like.
For example they can drag a element, hit 'Add frame', drag the element again... to create a multiframe animation.
I would like to allow the user to trigger other animations or DOM manipulation (show/hide) when a given frame is reached.
At present it doesn't seem you have any event that can be used with Keyframes, the changeComplete seem to fire after every loop not on every keyframe.
Alternative
I notice on Update you do have a progress, so for my purposes I trigger an action at a given progress - At 50% show some text for eg.
But I think a keyframe reached event would be ideal.
swilkewitz
commented
3 years ago
I am creating a GUI application where users can create property keyframe animations by changing CSS styles and clicking a 'Add Frame' button, they can add as many frames as they like.
For example they can drag a element, hit 'Add frame', drag the element again... to create a multiframe animation.
I would like to allow the user to trigger other animations or DOM manipulation (show/hide) when a given frame is reached.
At present it doesn't seem you have any event that can be used with Keyframes, the
changeCompleteseem to fire after every loop not on every keyframe.Alternative
I notice on Update you do have a progress, so for my purposes I trigger an action at a given progress - At 50% show some text for eg.
But I think a keyframe reached event would be ideal.
I have created a lil CodePen