An interaction where users click and hold an element to move it, common for reordering lists, sliders, and drawing interfaces. Drag interactions should provide clear visual feedback about what's being moved and where it can be dropped. Consider touch device behavior where drag competes with scrolling gestures.

A user action or system occurrence that can trigger responses, such as clicks, scrolls, form submissions, or page loads. Events drive interactivity by connecting user actions to visual feedback and functionality. Understanding events helps create responsive, engaging experiences.

The visual appearance of an element when a user's cursor is positioned over it, providing feedback and indicating interactivity. Hover states are essential for buttons, links, and clickable elements—without them, users can't tell what's interactive. Remember that hover doesn't exist on touch devices, so don't rely on it for essential information.

Any way users engage with your interface, from clicks and hovers to scrolls and gestures. Well-designed interactions feel responsive and intuitive while providing clear feedback. Framer enables complex interactions through triggers, animations, and state changes without coding.

An interactive element that navigates users to another page, section, or resource when clicked. Links are the fundamental building blocks of web navigation and interconnected content. Style links consistently throughout your site with clear visual distinction from surrounding text.

A CSS property controlling whether an element responds to mouse and touch interactions, useful for making elements click-through or non-interactive. Disable pointer events for decorative overlays that shouldn't block underlying interactions. Be cautious—removing pointer events can create accessibility issues.

Animated scrolling that eases between positions rather than jumping instantly, creating smoother navigation. Smooth scroll improves user experience when jumping to anchors or returning to top. Ensure smooth scroll doesn't interfere with user scroll input.

The current condition of a component or interface element, such as default, hover, active, loading, or error. Managing state effectively enables responsive, interactive experiences. Design all relevant states and transitions between them.

A hyperlink that jumps to a specific section within the same page, identified by an ID attribute on the target element. These improve navigation on long pages by letting users skip directly to relevant content. In Framer, create anchor links by adding IDs to sections and linking to them with the # symbol followed by the ID name.

An invisible clickable area overlaid on designs to add interactivity, commonly used in prototypes for click-through demonstrations. Hotspots enable quick prototyping of interactions without building fully functional components. In Framer, prefer native interactive components over hotspots for production.

Visual cues that suggest how an element can be used, such as a raised button appearing clickable or an underlined word suggesting a link. Affordances draw on learned conventions and physical metaphors to make interfaces intuitive without instructions. Strong affordances reduce learning curves and help users discover functionality naturally.