Base System for Webflow
  • Getting Started
    • Welcome
    • Getting Started
  • FRAMEWORK
    • Classes
    • Colors
    • Structure
    • Typography
    • Elements
    • Interactions
  • Additional Reading
    • Theory
    • Changelog
Powered by GitBook
On this page
  • Interactions
  • Transitions
  1. FRAMEWORK

Interactions

Additional concepts that are handy to know

PreviousElementsNextTheory

Last updated 3 months ago

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.

Page cover image