Page editor events and interactions

The Events tab (panel title: Element Interactivity) lets you define when something happens on your live site and what changes on the page—menus that open, sections that fade in on scroll, gallery tiles that dim on hover, smooth scroll to anchors, and subtle parallax. This is not Events Manager (workshops and tickets); it is part of the page and header/footer template editors.

Configure it from the right sidebar: Edit → Events, with a block, row, column, or section selected. See Page editor sidebar and toolbar for the full sidebar layout.

What you can do (capability overview)

Power	How you get it
Scroll-triggered reveals	Enter viewport + Add class (pair with CSS transitions in Style or theme CSS)
Click-driven UI	Click + Toggle class, Show, Hide, or Scroll to — works on phones (unlike hover-only effects)
Gallery-style hover	Hover enter / Hover leave + Dim / Undo dim or Spotlight / Remove spotlight on tile wrappers
Load-time polish	On load (mount) + Add class or Show when the page initializes
Focus states	Focus / Blur + Add class or Remove class on focusable controls
Motion	Parallax (scroll or pointer) and Scroll scrub (progress-linked scale/opacity) with bounded intensity
Cross-element control	Apply action to → Another element (CSS selector) to toggle a distant panel (e.g. #mobile-menu)

ArtInStack stores interactions as declarative data on the element (not arbitrary scripts). A small, allowlisted runtime on published pages applies your rules safely after you Save Page.

How it works

[Select element on canvas]
        → Events tab: Event (trigger) + Action + Apply action to
        → Save Page → Publish (when ready)
        → Live site runs interactions on that page's content

Each interaction is one row in the list:

1. Event — When it fires (UI labels below match the editor dropdown).
2. Action — What happens (toggle class, scroll, dim siblings, etc.).
3. Apply action to — This element, Another element (CSS selector), or Sibling elements (for grid hover presets).
4. Run once (optional) — For clicks and viewport reveals, fire only the first time.

You can stack multiple interactions on the same element (for example On load → add a ready class, then Click → toggle a menu).

Events tab — triggers and actions

The editor only offers valid trigger + action pairs. If an action is grayed out or missing, switch the Event first.

Events (triggers)

Event (UI label)	Best for
Click	Buttons, cards, menus—use for anything visitors must do on mobile
On load (mount)	Initial state when the page loads (ready class, show a band)
Enter viewport (scroll reveal)	Fade/slide-in as the visitor scrolls (uses viewport intersection, not raw scroll listeners)
Hover enter / Hover leave	Desktop enhancements—always pair leave with enter
Focus / Blur	Form fields and focusable controls (tabindex on custom divs if needed)
Pointer move (continuous)	Cursor-linked parallax (throttled; respects reduced motion)

Actions

Action (UI label)	What it does
Toggle class	Adds or removes a CSS class on the target—ideal for Click menus and tabs
Add class / Remove class	One-way class changes—ideal for reveals and hover pairs
Show / Hide	Visibility via platform classes (default hide uses Tailwind-style hidden)
Dim / Undo dim	Dims sibling tiles in the same row/column parent (gallery grids)
Spotlight / Remove spotlight	Highlights the hovered element
Scroll to	Smooth scroll to an in-page anchor (#section-id)
Parallax (scroll or pointer)	Subtle motion tied to scroll or pointer (intensity capped in the form)
Scroll scrub (progress → style)	On load, animates scale/opacity as the element moves through the viewport

Apply action to

Option	Use when
This element (selected)	The selected block should change (or host a hover listener for sibling dimming)
Another element (CSS selector)	You need to toggle #nav-drawer, .accordion-panel, etc.
Sibling elements (same parent)	Grid hover Dim / Undo dim—attach the interaction to the tile wrapper so siblings are other tiles

Viewport timing (for scroll reveal): presets Default, Earlier, Later, or Custom root margin control how soon the reveal fires.

High-value recipes

Scroll reveal (fade or slide in)

1. Select the section or block root.
2. Events → Enter viewport (scroll reveal) → Add class → class name e.g. is-visible.
3. In Style (or your theme), define that class with opacity / transform + transition.
4. Enable Run once (recommended) so the animation does not repeat every time the user scrolls back.
5. Save Page → open the public or preview URL and scroll to the block.

Mobile menu or disclosure

1. Put an id on the panel in Attr if needed (or use a class).
2. On the button block: Click → Toggle class → Another element → #your-panel-id → class e.g. is-open.
3. Style .is-open in CSS to show the drawer.
4. Test on Mobile preview width.

Portfolio grid — dim other tiles on hover

1. Select the tile wrapper (the column cell around each image—not the bare img unless that is the block root).
2. Hover enter → Dim → This element (listener stays on the tile; siblings dim).
3. Add a second interaction: Hover leave → Undo dim.
4. Save Page and test on desktop; provide a Click alternative for critical info on mobile.

Smooth scroll to a section

1. On a Button or Link block: Click → Scroll to → selector #pricing (must exist on the page).
2. Scroll offset customization is not available—the browser scrolls the target to the top of the viewport.

Parallax or scroll scrub

1. Prefer On load (mount) + Parallax or Scroll scrub on a parent section; use Another element selector if the moving layer is a child with an id.
2. Keep intensity low; the editor enforces caps.
3. Test with Desktop preview and respect that some visitors use reduced motion (effects may be minimized).

Design rules that keep pages reliable

Rule	Why
Critical behavior → Click	Hover does not exist on many phones
Pair hover enter + hover leave	Avoid stuck “dimmed” grids
Avoid hover + Hide on the same element	Once hidden, the visitor cannot hover again to undo
Use Add/Remove class for hover	Do not use Toggle class on hover—it can flip the wrong way on re-entry
Classes must exist in CSS	Add class only changes the name; define .is-visible, .is-open, etc. in Style or theme CSS
Attach to the block root	Fewer duplicate listeners; easier to find in Layers
Save before judging live behavior	Interactions apply on published/preview HTML, not only the static canvas

Limits (per page)

The Events tab shows live counters. Typical caps:

Limit	Approximate value
Interactions per selected element	15
Discrete interactions per page	200
Continuous motion (parallax / scroll scrub) per page	32
Elements with interactions per page	80

If Add interaction is disabled, remove unused interactions elsewhere on the page or simplify motion-heavy effects.

Header, footer, and template editors

The same Events tab appears when you edit header or footer templates under Settings → Header & Footer. Use it for sticky nav toggles or footer reveal bands—see Header, footer, and navigation.

Troubleshooting

Symptom	What to check
Nothing happens on the live site	Save Page; test preview/public URL, not only the canvas; confirm the element still has interactions listed in Events
Hover works once, then never	You used Hide on hover—switch to Add class / Remove class with a non-display:none effect
Class toggles but no visual change	No CSS rules for that class name
Scroll reveal never fires	Threshold/margin too strict; element already visible on load; class missing transition
Menu works on desktop, not phone	Rely on Click, not hover-only
Dim wrong tiles	Interaction on wrong wrapper—siblings must share the same parent

Next steps & validation

1. Open a draft page → select a Section → Events → add Enter viewport + Add class → Save Page.
2. Preview the page in a browser and scroll until the section enters view.
3. Add Click + Toggle class on a button targeting a hidden panel; confirm on Mobile width.
4. Read Editor blocks and layout reference for block types that pair well with interactions.