Implements imperative animations for Valdi component attributes and state changes.
npx skills add https://github.com/Snapchat/Valdi --skill valdi-animations
Please help me install this Agent Skill. Skill: valdi-animations Source: https://github.com/Snapchat/Valdi/tree/main/ai-skills/skills/valdi-animations Command: npx skills add https://github.com/Snapchat/Valdi --skill valdi-animations
Valdi does not support CSS transitions, keyframes, or React-style animation libraries, so developers need guidance on the framework's imperative animation model to animate layout changes, view attributes, and state transitions correctly.
this.animate() and this.animatePromise() with duration, preset curves, custom bezier control points, and spring physics to animate element attribute mutations.setStateAnimated() to re-render with new state while animating all resulting view mutations automatically.animationTransform on attributed text chunks and the <textanimationgroup> container for a shared timeline.setStateAnimated({ expanded: true }, { duration: 0.3 }) so the width and height changes animate smoothly instead of jumping instantly.Ask the assistant to animate a Valdi component's width and font changes using this.animate with a 0.3 second duration and an ease-in-out curve.
High-intent search queries and answers about installing and using this skill.
Call this.animate() with options and a mutation block, then change attributes inside it via ElementRef.setAttribute(). All changes inside the block animate automatically over the specified duration and curve.
Use this.setStateAnimated(newState, options) instead of calling setState inside an animate block. It re-renders with the new state and animates all resulting view mutations with the given duration and curve.
No. Valdi has no transition property, @keyframes, or animation-duration. Animations are triggered programmatically through the imperative animate and animatePromise APIs inspired by iOS animateWithDuration.
Pass stiffness and damping in the options instead of a duration, and spring physics determine the timing. Lower damping produces more bounce, while higher damping settles smoothly.
The duration option is measured in seconds, not milliseconds. Passing duration: 300 means 300 seconds; use 0.3 for a 300-millisecond animation.
Attach an animationTransform to an AttributedText chunk with fields like translationY, opacity, and timeOffsetBetweenParts, then wrap the labels in a textanimationgroup container so all descendants share one coordinated timeline.
robotostudioImplement UI state transitions in React apps using the View Transition API with Next.js routing support.
Adham7843Create interactive animations and gestures for React applications with Framer Motion and React 18+.
AerisG222Convert Android XML layouts and View components into Jetpack Compose code.
logeshv586-codeProvide animation and transition utilities for Tailwind CSS components.