Implements GSAP animation easing functions including elastic, bounce, and custom curves.
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-easing-wayn-git
Please help me install this Agent Skill. Skill: gsap-easing Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-easing Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-easing-wayn-git
back.out(1.7) with the documented pattern instead of guessing parameters, and use power2.out for staggered lists to keep performance acceptable. ## Quick Start Ask the AI to add a springy elastic entrance animation to a modal element using GSAP with the correct ease and duration.High-intent search queries and answers about installing and using this skill.
Set the ease property in the tween vars, for example gsap.to('.box', { x: 200, duration: 1, ease: 'power2.out' }). GSAP defaults to power1.out, and you can combine any ease family with in, out, or inOut modifiers.
Use power2.out for standard UI transitions, back.out(1.7) for entrances, and power2.in for exits. Reserve elastic and bounce eases for attention-grabbing or playful effects since they are more computationally expensive.
Register the CustomEase plugin and call CustomEase.create with a name and an SVG path string or point array, then reference that name in the ease property. CustomWiggle and CustomBounce work similarly for oscillation and bounce curves.
Yes, set a default ease in gsap.timeline({ defaults: { ease: 'power2.out' } }) and override per tween as needed. For many staggered elements, prefer simple power eases over elastic to avoid performance issues.
A common mistake is using an in-direction ease like power2.in for entrances, which starts slow instead of settling smoothly. Use out-direction eases such as power2.out or back.out(1.7) for elements animating into view.
magicpro97Implement GSAP animations in React components with the useGSAP hook.
DanielV-94Sequence GSAP tweens with timelines, position parameters, and labels.
toddmoyDesign performant UI animations with CSS and Framer Motion.
taxmaxiDesign and implement web animations using CSS, Framer Motion, and SVG techniques.