Add Envelope component

[tom-leamon]

The Envelope component is designed for creating and managing custom animations through the creation of keyframes and curves.

Feature Checklist

• Adjusting Keyframes: Enable interactive, real-time adjustment of keyframes, including click-and-drag functionality and precise movement using arrow keys.
• Manual Value Entry for Keyframes: Provide an option for users to enter precise values for keyframe position and curve.
• Duration: Implement a feature that allows synchronization of animations with music tempo (matching BPM), with options for timing animations in seconds or beats. Include interactive controls for dynamically altering animation duration (halving, doubling, or applying custom multipliers) during playback.
• Presets: Implement various easing presets such as Quadratic, Sine, Circular, Exponential, Elastic, Back, and Bounce, as quick starting points for animations.
• Saving Envelopes as Presets: Allow users to save their custom envelope configurations as presets for easy reuse and management, including options for renaming or deleting presets. (I will handle this)

Reference Screenshots

These are from Resolume.

Resources

To further enhance the Envelope component, additional functionalities based on the following resources should be integrated:

• Integration with GSAP Easing: The component should have the capability to generate custom easing functions, drawing from the methods outlined in GSAP's documentation. Refer to GSAP Eases for detailed information on easing methods available in GSAP. This integration will allow for complex and customizable easing patterns in animations within the application.

• Custom Easing Functionality with SVGs: Implement a feature similar to the open-source GSAP ease visualizer found at GSAP Ease Visualizer. This functionality should allow users to visually construct and adjust easing curves using SVGs. Users should be able to insert and drag points on an interactive graph, providing a hands-on approach to defining the dynamics of animation easing.

• Resolume's Approach to Envelope Animations: To gain insights into innovative implementations of envelope animations, a reference to Resolume's methodology can be very helpful. Watch this YouTube video which explains Resolume's approach to envelope animations. This resource will provide a broader perspective on animation control and creative possibilities.

• Resolume's Envelope Documentation: For further inspiration and understanding of envelope animation techniques, Resolume's own documentation on the subject can be a valuable resource. Review Resolume's envelope documentation at Resolume Envelopes to explore different approaches and functionalities that could be implemented in the Envelope component.

Relevant components

• NumberInput: enables precise control over values. Includes spinners and click-and-drag to set.
• Dropdown: for preset and curve selection.

[tom-leamon]

Bugs to fix:

• When the direction is "reverse", and adjustment to the path (or duration) causes the direction to change to "forward" (the animation is recreated)
• When the mode is "loop" if you set the direction to "reverse" it will switch back to "forward" when it reaches the start of the timeline
• It's possible for curves to go above the top/bottom of the graph
• It's possible for invalid curves to be created
• Double clicking on a handle path creates a new point in the incorrect spot
• The starting and ending points are slightly misaligned with the actual path
• Manually adjusting value (but not phase) always reset the position of the active point to the last position it was dragged to