cut-the-curve

Implements velocity-matched GSAP transition techniques for cinematic motion-graphics scene cuts and text animations.

Updated Sep 6, 2026
One-click install
npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill cut-the-curve-abubakar125-co
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cut-the-curve
Source: https://github.com/AbuBakar125-co/Resturant_web/tree/main/agent/skills/cut-the-curve
Command: npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill cut-the-curve-abubakar125-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Motion-graphics videos often suffer from jarring scene transitions, mismatched animation velocities, and amateur-looking text entrances. This Skill provides a precise parameter catalog for authoring velocity-matched cuts, zoom transitions, staggered text cascades, and group slides with GSAP so every seam reads as intentional cinematic motion. ## Core Features & Use Cases - Five Seam Techniques: Zoom-through, inverse zoom-through, cut-the-curve, waterfall cut, and rack-focus blur-cut, each with exact scale, blur, opacity, ease, and duration parameters. - Two In-Scene Techniques: Waterfall entry for staggered title-card arrivals and the nudge curve for slow-fast-slow three-phase group repositioning. - Ready-to-Copy GSAP Templates: Worker-authored and registry gsap_template code for every variant, including DOM/CSS structure and tuning ranges. - Use Case: When building a kinetic-text video where one headline hands off to the next, apply the waterfall cut parameters (±230px travel, power4.in/out mirrored eases, 0.022s word stagger) so words cascade across the seam at matched velocity. ## Quick Start Read this Skill before authoring any scene transition or kinetic text animation, then copy the matching GSAP template from examples/gsap-implementation.md for the technique you need.

Frequently Asked Questions about cut-the-curve

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a velocity-matched scene transition with GSAP?

Use the cut-the-curve technique: animate the outgoing element with power4.in over ~230px (about 12% of frame), hard-cut mid-motion, then animate the incoming element from the opposite offset with power4.out. The mirrored eases make velocity match exactly at the cut frame.

What is the difference between zoom-through and inverse zoom-through?

Zoom-through grows both texts (exit scales 1 to 1.2, entry grows from 0.75) for progressing deeper into a thought. Inverse zoom-through shrinks both (exit 1 to 0.8, entry retracts from 1.25) and is reserved for arrival or payoff beats.

How much blur should I use at a transition cut in GSAP?

Use 10px peak blur for text-scale subjects like headlines, and 18-20px only for full-frame surfaces such as screenshots or cards. Blur the wrapper element, never children, and match blur and opacity values exactly on both sides at the swap frame.

Why does my GSAP scene cut flash white between scenes?

A mid-window cut briefly sums opacities below 1, exposing the page background. Fix it by giving the #root element an opaque background such as var(--canvas, #000) so no transparent gap appears during the transition.

When should I not use the waterfall cut technique?

Waterfall cut is only for text-to-text seams inside one multi-beat composition; it is not a registry transition type. Do not use it for ordinary scene boundaries, and never mix its mid-path fade rules with the binary 0-to-1 opacity rule of waterfall entry arrivals.