Avatar
Walking Animation
Guide visitors across the webpage with animated walking, gliding, and pointing transitions.
Overview
The Walking Animation is activated during guided walkthroughs when the assistant physically travels across the screen to direct visitor attention to a specific button, form field, or pricing card.
How Guided Movement Works
- The SDK receives a guidance target selector (e.g.
#submit-button).
- The avatar calculates the DOM coordinates and rotates towards the target.
- The avatar transitions into the
walkingstate and translates across the screen along a cubic Bezier curve.
- Upon reaching the target, the avatar transitions into the
pointingstate and highlights the element.
Configuring Walking Speed & Paths
Asiyst.guideToElement("#pricing-table", {
speed: "normal", // 'slow' | 'normal' | 'fast'
pointDirection: "left",
message: "Here are our annual discounted tiers!",
});