Problem
First of all, thank you for the incredible work on Instatic! The core visual building experience is fantastic. To take the platform's capabilities to the next level, I would like to propose the implementation of a dedicated Visual Animation and Interactions Editor, similar to the interaction panels found in Webflow or Framer.
Why is this needed?
Modern web design relies heavily on complex, trigger-based interactions to create engaging user experiences. Currently, designers building highly interactive sites expect a way to orchestrate scroll sequences, parallax effects, and complex state transitions visually. A built-in interaction timeline would empower users to build these dynamic experiences without writing custom animation logic or manually integrating heavy third-party JavaScript libraries.
Core Features Proposed:
-
Event Trigger System: Visual controls to easily bind animations to specific triggers such as Page Load, Scroll Into View, While Scrolling (Continuous Scroll), Mouse Hover, and Mouse Click/Tap.
-
Timeline Interface: A keyframe-based timeline editor allowing users to sequence transformations (opacity, scale, translate, rotate) across multiple target elements smoothly.
-
Native Performance Focus: To maintain high performance, the engine could output modern native CSS features—such as CSS Scroll-Driven Animations—under the hood. This ensures the final build remains incredibly lightweight and performant, relying on JS only for complex logic that CSS cannot handle.
-
Easing & Spring Physics: Intuitive visual inputs for adjusting cubic-bezier curves or spring parameters, giving animations a natural and polished feel.
Impact on the Project:
Introducing a robust interactions panel would significantly close the feature gap between Instatic and established enterprise visual builders. It would attract a broader audience of professional designers and low-code developers who consider native, timeline-based animation editors a strict requirement for their workflow.
I would love to hear the maintainers' thoughts on this direction. I am open to discussing specific UI concepts or technical implementation ideas if this aligns with the roadmap!
Proposed solution
This initial implementation (MVP) could include:
Basic Triggers: Support for fundamental events such as 'Scroll Into View' (appear animations), 'Hover', and 'Click'.
State Definitions: Simple UI inputs to define an 'Initial State' and an 'End State' for an element (e.g., animating opacity from 0 to 1, or translating the Y-axis by 20px).
Native CSS Output: To maintain high performance and keep the generated site lightweight, the engine should compile these settings directly into standard CSS transitions, @Keyframes, or modern CSS Scroll-Driven Animations, avoiding the need for heavy external JavaScript libraries at this stage.
Basic Timing Controls: Simple inputs for duration and standard easing options (e.g., ease, ease-in-out).
Alternatives considered
Currently, the only alternative is manually writing custom CSS/JS or injecting third-party libraries (like GSAP or Framer Motion) via custom code blocks. This breaks the seamless visual building experience and can negatively impact page load performance.
Area
None
Problem
First of all, thank you for the incredible work on Instatic! The core visual building experience is fantastic. To take the platform's capabilities to the next level, I would like to propose the implementation of a dedicated Visual Animation and Interactions Editor, similar to the interaction panels found in Webflow or Framer.
Why is this needed?
Modern web design relies heavily on complex, trigger-based interactions to create engaging user experiences. Currently, designers building highly interactive sites expect a way to orchestrate scroll sequences, parallax effects, and complex state transitions visually. A built-in interaction timeline would empower users to build these dynamic experiences without writing custom animation logic or manually integrating heavy third-party JavaScript libraries.
Core Features Proposed:
Event Trigger System: Visual controls to easily bind animations to specific triggers such as Page Load, Scroll Into View, While Scrolling (Continuous Scroll), Mouse Hover, and Mouse Click/Tap.
Timeline Interface: A keyframe-based timeline editor allowing users to sequence transformations (opacity, scale, translate, rotate) across multiple target elements smoothly.
Native Performance Focus: To maintain high performance, the engine could output modern native CSS features—such as CSS Scroll-Driven Animations—under the hood. This ensures the final build remains incredibly lightweight and performant, relying on JS only for complex logic that CSS cannot handle.
Easing & Spring Physics: Intuitive visual inputs for adjusting cubic-bezier curves or spring parameters, giving animations a natural and polished feel.
Impact on the Project:
Introducing a robust interactions panel would significantly close the feature gap between Instatic and established enterprise visual builders. It would attract a broader audience of professional designers and low-code developers who consider native, timeline-based animation editors a strict requirement for their workflow.
I would love to hear the maintainers' thoughts on this direction. I am open to discussing specific UI concepts or technical implementation ideas if this aligns with the roadmap!
Proposed solution
This initial implementation (MVP) could include:
Basic Triggers: Support for fundamental events such as 'Scroll Into View' (appear animations), 'Hover', and 'Click'.
State Definitions: Simple UI inputs to define an 'Initial State' and an 'End State' for an element (e.g., animating opacity from 0 to 1, or translating the Y-axis by 20px).
Native CSS Output: To maintain high performance and keep the generated site lightweight, the engine should compile these settings directly into standard CSS transitions, @Keyframes, or modern CSS Scroll-Driven Animations, avoiding the need for heavy external JavaScript libraries at this stage.
Basic Timing Controls: Simple inputs for duration and standard easing options (e.g., ease, ease-in-out).
Alternatives considered
Currently, the only alternative is manually writing custom CSS/JS or injecting third-party libraries (like GSAP or Framer Motion) via custom code blocks. This breaks the seamless visual building experience and can negatively impact page load performance.
Area
None