Interactions
Additional concepts that are handy to know
Last updated
Additional concepts that are handy to know
Last updated
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).
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.