cut-the-curve

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

13|17|Updated Jan 30, 2025
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill cut-the-curve-codewithsally
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cut-the-curve
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/cut-the-curve
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill cut-the-curve-codewithsally

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Scene transitions and text animations in GSAP-based video compositions often look amateur because cuts happen at rest, eases mismatch across the seam, or blur and opacity values diverge at the swap frame. This Skill provides a parameterized catalog of seven velocity-matched techniques so every cut lands mid-motion with matched direction, speed, and blur on both sides. ## Core Features & Use Cases - Five seam techniques: zoom-through, inverse zoom-through, cut-the-curve (default scene boundary), waterfall cut (word-by-word text seams), and rack-focus blur-cut, each with exact scale, blur, opacity, ease, and duration tables. - Two in-scene techniques: waterfall entry (staggered arrival cascades for title cards) and the nudge curve (three-phase slow-fast-slow group slides using a 10/65/25 distance ratio). - Ready-to-copy GSAP code: worker-authored timeline snippets and registry gsap_templates with token placeholders in examples/gsap-implementation.md. - Use Case: When authoring a scene boundary in a kinetic-text video, apply cut-the-curve: exit the outgoing hero 230px leftward with power4.in, hard-cut mid-motion, and enter the incoming hero from +230px with power4.out so velocity matches exactly at the cut. ## Quick Start Read this Skill before authoring any transition, then implement a cut-the-curve scene boundary between my two scenes using the GSAP template from the examples file.

Frequently Asked Questions about cut-the-curve

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

FAQPage Schema
How do I make a smooth scene transition in GSAP?▼

Use cut-the-curve: accelerate the outgoing hero about 12% of frame width (roughly 230px at 1920) with power4.in, hard-cut mid-motion, then enter the incoming hero from the opposite offset with power4.out. The mirrored eases make velocity match exactly at the cut.

How to animate word-by-word text transitions with GSAP?▼

Use the waterfall cut: exit words with 0.34s power4.in tweens staggered 0.022s in reading order, fading out by 25-30% of travel, then enter incoming words from +230px starting at 0.35 opacity with gaps shrinking by a 0.84 factor so the cascade accelerates.

What blur amount should I use for text zoom transitions?▼

Use 10px peak blur for text-scale subjects like headlines; 20px smears letterforms and reads as a glitch. Reserve 18-20px blur for full-frame surfaces such as screenshots or cards, and keep the same peak blur on both sides at the swap frame.

Why does my GSAP scene cut flash white between scenes?▼

The flash happens because a mid-window cut opens a summed-opacity window below 1, exposing an unpainted root. Fix it by giving #root an opaque background such as var(--canvas-deep, #000) so the stage ground stays solid during the transition.

When should I use inverse zoom-through instead of zoom-through?▼

Use inverse zoom-through only for arrival or payoff beats where something bigger lands, since everything shrinks and the incoming element arrives oversized at 1.25 scale then retracts. Standard zoom-through suits progressing deeper into the same thought within a scene.

Why does power4.inOut look bad for group slide animations?▼

A single power4.inOut ease smacks to a stop because its deceleration is too abrupt for repositioning. Chain three tweens instead: power3.in for about 10% distance, a linear burst for 65%, then a long power4.out tail at least three times the ramp-in duration.