feat(lint): flag late fromTo tweens that flash the authored state before starting - #3466
Open
miguel-heygen wants to merge 1 commit into
Open
feat(lint): flag late fromTo tweens that flash the authored state before starting#3466miguel-heygen wants to merge 1 commit into
miguel-heygen wants to merge 1 commit into
Conversation
…ore starting
A timeline fromTo() renders with GSAP's default immediateRender: false.
When its position is after the timeline start and the target's authored
state is visible, the element sits fully rendered from t=0, then jumps
to the from-vars when the tween begins — a visible flash on every
playback and cold seek. In practice this breaks typewriter reveals,
staggered line entrances, and any 'hidden until its beat' element.
New gsap_fromto_flash_before_start rule fires when a fromTo targets a
non-pre-hidden element at a position past the timeline start with
state-changing from-vars. Exemptions:
- authored hidden state (CSS opacity:0, standalone gsap.set, or a
timeline set-to-hidden at the timeline start)
- identity from-vars (e.g. tl.fromTo(el, { x: 0 }, ...)) — no jump
- immediateRender: true — from-vars hold from load
- tweens at the timeline start (zero flash window)
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.
Problem
A
tl.fromTo()positioned after the timeline start renders with GSAP's defaultimmediateRender: false. If the target's authored state is visible, the element sits fully rendered from t=0, then jumps to the from-vars when the tween finally starts — a visible flash on every playback and every cold seek.Real-world casualty: a typewriter composition whose code lines were supposed to type in one at a time. Every line was fully readable from frame 0, then vanished and slid back in when its tween fired. The composition passed all existing gates.
Fix
New lint rule
gsap_fromto_flash_before_startinpackages/lint. It fires when afromTo():opacity/autoAlpha≠ 1).Exemptions, each covered by a test:
opacity: 0, a standalonegsap.set(), or a timelineset-to-hidden at the timeline starttl.fromTo(el, { x: 0 }, ...)) — nothing to jump toimmediateRender: true— GSAP applies the from-vars at build time and holds themThe fixHint offers the two real fixes: hide the authored state (CSS
opacity: 0+ destinationopacity: 1, or a position-0tl.set), orimmediateRender: true.Testing
packages/lint/src/rules/gsap.test.tscovering each trigger and exemption (170 pass in the file)packages/lintsuite: 517 pass; the 8 failures inhyperframeLinter.test.ts(vi.unstubAllGlobals is not a function) reproduce onmainuntouched and are unrelated