feat(lint): add gsap_css_transform_conflict and sequential_clips_different_tracks rules#105
Closed
miguel-heygen wants to merge 1 commit into
Closed
Conversation
…erent_tracks rules
Two new lint rules that catch silent rendering bugs:
**gsap_css_transform_conflict** (error)
When an element has `transform: translateX(-50%)` or `transform: scale()`
in CSS and is also targeted by a GSAP `tl.to/from` tween animating `x`,
`y`, `xPercent`, `yPercent`, or `scale` — GSAP silently overwrites the
full CSS transform, discarding centering tricks like translateX(-50%).
Root cause: discovered while authoring a title reveal where `HYPER` and
`FRAMES` were meant to collide at center but ended up pinned to the right
half of the frame because `tl.to("#title", { x: 0 })` stripped the
`translateX(-50%)` centering.
Fix hint guides authors toward the safe pattern:
`tl.fromTo('#el', { xPercent: -50, x: -1000 }, { xPercent: -50, x: 0 })`
**sequential_clips_different_tracks** (warning)
When sequential (non-overlapping) `class="clip"` elements are spread across
different `data-track-index` values, the framework only auto-mounts/unmounts
clips on the *same* track. Clips on different tracks are always present in
the DOM — only GSAP opacity controls their visibility, which can silently
fail at seek time, causing only the first scene to appear.
Fix hint: use `data-track-index="1"` on all sequential scene clips.
Both rules are tested with positive cases (conflict detected) and negative
cases (correct patterns not flagged).
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Collaborator
Author
|
Closing in favour of a cleaner PR pushed directly from the main repo. |
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two new lint rules that catch silent rendering bugs discovered while authoring compositions with HyperFrames.
gsap_css_transform_conflict(error) — fires when an element hastransform: translateX(-50%)ortransform: scale()in CSS and a GSAPtl.to/fromtween animatesx,y,xPercent,yPercent, orscale. GSAP silently overwrites the full CSS transform, discarding centering tricks liketranslateX(-50%). The fix hint guides authors to the safefromTo+xPercentpattern.sequential_clips_different_tracks(warning) — fires when sequential (non-overlapping)class="clip"scenes are on differentdata-track-indexvalues. The framework only auto-mounts/unmounts clips on the same track; clips on different tracks are always present in the DOM, making GSAP opacity the only guard — which can silently fail at seek time, causing only the first scene to render.Root cause
Both bugs were encountered while building a launch video. The title reveal placed
HYPERandFRAMESoff-center becausetl.to("#title", { x: 0 })stripped thetranslateX(-50%)centering. Separately, a multi-scene composition showed only the first scene because each scene was on a unique track index.Test plan
gsap_css_transform_conflict— positive:tl.towithxon element with CSStranslateX→ errorgsap_css_transform_conflict— positive:tl.towithscaleon element with CSSscale()→ errorgsap_css_transform_conflict— negative:tl.fromToon element without CSS transform → no findingsequential_clips_different_tracks— positive: 3 sequential clips on tracks 1/2/3 → warningsequential_clips_different_tracks— negative: 3 sequential clips all on track 1 → no findingpnpm vitest run src/lint/hyperframeLinter.test.ts)🤖 Generated with Claude Code