Visibility Plugins

Source

Focused on showing and hiding elements based on signals. Most of the time you want to send updates from the server but is useful for things like modals, dropdowns, and other UI elements.

Attributes Plugins

Show

<div data-show="$showMe"></div>

Shows the element when the expression is true.

Modifiers

• .duration* - Duration for the show animation
  • _1000ms - Duration for 1000ms

*default is 300ms if duration value not provided

Intersects

<div data-intersects="console.log('I am intersecting!')"></div>

Runs the expression when the element intersects with the viewport.

Modifiers

• .once - Only trigger the event once
• .half - Trigger when half of the element is visible
• .full - Trigger when the full element is visible

Teleport

<div data-teleport="#foo"></div>

Moves the element to the target.

Modifiers

• .prepend - Prepend the element to the target
• .append - Append the element to the target

Scroll Into View

<div data-scroll-into-view></div>

Scrolls the element into view. Useful when updating DOM from the server and you want to scroll to the new content.

Modifiers

• .smooth - Scrolling should be animate smoothly
• .instant - Scrolling should be instant
• .auto - Scrolling is determined by the computed scroll-behavior CSS property
• .hstart - Scroll to the left of the element
• .hcenter - Scroll to the horizontal center of the element
• .hend - Scroll to the right of the element
• .hnearest - Scroll to the nearest horizontal edge of the element
• .vstart - Scroll to the top of the element
• .vcenter - Scroll to the vertical center of the element
• .vend - Scroll to the bottom of the element
• .vnearest - Scroll to the nearest vertical edge of the element
• .focus - Focus the element after scrolling

View Transition

<div data-view-transition="foo"></div>

Page level transitions are automatically handled by an injected meta tag. Inter-page elements are automatically transitioned if the View Transition API is available. To set the view-transition-name style attribute explictily you use the data-view-transition attribute. The spec is still in draft and not available in all browsers but Datastar will do best effort.

When sending many Datastar messages in a small period of time it is often reccomended to not perform view-transitions as it can make elements unresponsive. You can always turn them off on a per-message basis.