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.