Interactions

Additional concepts that are handy to know

Interactions

Interactions are named using a structured naming format similiar to how we name classes; Block - Element - Action

• Block: Defines where the interaction is being used (e.g., Navigation, FAQ, Testimonial).

• Element: Specifies the element where the interaction is applied.

• Action: Describes the behavior or trigger (e.g., Open, Close, Hover On, Scroll).

---

Transitions

When adding transitions, avoid using transition-all. While convenient, this can lead to performance issues and animation bugs because it forces browsers to repaint the entire UI during animations. Instead target specific properties (e.g., transition: opacity 0.3s ease;) to optimize performance.