Open
Description
Enhance the Web Component Designer with a built-in CSS Animation Editor, allowing users to create, preview, and fine-tune animations visually. This tool should provide an intuitive way to work with CSS animations while remaining fully optional as an extension.
Key Features:
- Visual Animation Editor – A dedicated UI for defining animations, similar to Google Web Designer.
- Timeline Control – A timeline-based interface to adjust keyframes, easing functions, and animation duration.
- Property Grid Integration – Allow users to modify animation properties directly in the property grid.
- Drag-and-Drop Support – Enable users to apply animations by dragging them onto elements.
- Predefined Animations – Offer ready-made animations (e.g., fade-in, bounce, slide) similar to the Wix Toolkit.
- Preview & Playback – Provide live previews of animations within the editor.
- Extensibility & Modularity – Ensure the animation editor can be completely disabled, aligning with the existing extension system.
Sample Image:
Here are the components form the Google Web Designer, maybe we could use the Timeline Control?
https://github.com/niutech/gwdcomponents
Look also at expression blend maybe. It had some nice Animation support. (For Ideas)
We need a general way, on how Set Styles would set them in a Animation.