Implement web animations and scroll effects with GSAP in React.
npx skills add https://github.com/alexejluft/brudi --skill animating-interfaces
Please help me install this Agent Skill. Skill: animating-interfaces Source: https://github.com/alexejluft/brudi/tree/main/skills/animating-interfaces Command: npx skills add https://github.com/alexejluft/brudi --skill animating-interfaces
This Skill provides clear guidelines and best practices for implementing animations and scroll effects in web interfaces, ensuring performance, accessibility, and a polished user experience.
transform and opacity for performance.will-change correctly and avoiding layout-triggering properties.useGSAP hook for seamless GSAP integration in React.Use the animating-interfaces skill to apply a standard fade-in animation to a list of elements with a stagger effect.
High-intent search queries and answers about installing and using this skill.
Animate React components with GSAP using the `useGSAP` hook and limit animations to `transform` and `opacity` properties. This prevents layout thrashing by keeping animations GPU-accelerated and avoiding layout-triggering properties.
Handle reduced motion for CSS scroll animations by integrating accessibility standards that respect user preferences. The skill ensures animations are disabled or adapted for users who request reduced motion.
Stagger UI element fade-in animations using defined timing and easing functions adaptable with Tailwind CSS v4. The skill provides specific patterns for animating multiple elements with pleasing sequential delays.
Interface animations stutter when triggering layout properties. Optimize performance by using `will-change` correctly and focusing animations on `transform` and `opacity` to ensure they are GPU-accelerated.
Yes, you can animate variable font settings in a web interface. The skill explains how to animate variable font settings alongside other interface animations using GSAP within React.
Mischio95Set up shadcn/ui components and forms with React Hook Form and Zod.
keremtoker468-dotcomAudit web interfaces for accessibility, performance, and code quality.
ChenYCLGenerate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.
Alfie728Design web animations with timing, easing, and accessibility guidelines.