GSAP Tween Generator
gsap_tweenCreate GSAP tweens for single-target animations with methods: to, from, fromTo, set. Define properties, easing, stagger, and callbacks.
Instructions
Generate a single GSAP tween (gsap.to, gsap.from, gsap.fromTo, gsap.set). Use for one-off animations on a single target. For sequenced multi-step animations use gsap_timeline instead. For common patterns like fadeIn or slideUp use gsap_preset instead.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| ease | No | Easing function name, e.g. 'power2.out', 'elastic.inOut', 'back.out(1.7)'. Use gsap_easing tool to browse available easings. | power1.out |
| yoyo | No | ||
| delay | No | ||
| method | Yes | 'to' animates TO the given values (most common). 'from' animates FROM the given values to current state. 'fromTo' animates between two explicit states. 'set' applies values instantly with no animation. | |
| repeat | No | ||
| target | Yes | CSS selector or target description | |
| stagger | No | ||
| duration | No | ||
| overwrite | No | ||
| onComplete | No | Function name to call on complete | |
| properties | Yes | GSAP animation properties. Use transform shorthands (x, y, scale, rotation) not CSS transform. Use autoAlpha instead of opacity+visibility. Values can be numbers, strings ('+=100', '50%'), or arrays for keyframes. | |
| fromProperties | No | Starting properties — required for fromTo method | |
| includeImports | No | Set to false when generating a snippet to insert into existing code that already has GSAP imported. |