fixing sequence stagger in generate - #278
Conversation
| @@ -63,6 +63,10 @@ export type ResolvedEffect = ElementIdentifier & | |||
| conditions: string[]; | |||
| triggerType: TimeAnimationTriggerType; | |||
| initial: boolean; | |||
| triggerType: TimeAnimationTriggerType; | ||
| initial: boolean; | ||
| /** Delay in ms. For sequence effects this is the stagger base (sequenceDelay + effectOwnDelay). */ | ||
| delay?: number; |
There was a problem hiding this comment.
But we already have a delay property on effects
| // element with the eased ordinal factor `f`, and CSS resolves `f * offset + base` per element. | ||
| // `base` (sequence delay + effect's own delay) and `offset` are static; only `f` is dynamic. | ||
| const staggerProp = staggerPropName(sequence.sequenceId, effect.sequenceIndex ?? 0); | ||
| const base = effect.delay || 0; |
| // effects its value is a `calc(...)` referencing a per-element stagger custom property that the | ||
| // run-time populates (see add.ts); otherwise it is the effect's own delay. One entry per | ||
| // css-animation keeps it positionally aligned with the `animation` list. | ||
| const delayValue = staggerCalc ?? `${effect.delay || 1}ms`; |
There was a problem hiding this comment.
| const delayValue = staggerCalc ?? `${effect.delay || 1}ms`; | |
| const delayValue = staggerCalc ?? `${effect.delay ?? 0}ms`; |
| animationDeclarations.push({ | ||
| name: customProps['animation-delay'], | ||
| value: | ||
| cssAnimations.map(() => delayValue).join(', ') || |
There was a problem hiding this comment.
Why the idle .map()?
| cssAnimations.map(() => delayValue).join(', ') || | |
| cssAnimations.join(', ') || |
| const easingFn = _resolveOffsetEasing(sequenceConfig.offsetEasing); | ||
| const last = targets.length - 1; | ||
|
|
||
| fastdom.mutate(() => { | ||
| targets.forEach(({ element, prop }, ordinal) => { | ||
| // linear easing → factor === ordinal; CSS then resolves `factor * offset + base` per element | ||
| const factor = last > 0 ? easingFn(ordinal / last) * last : 0; | ||
| element.style.setProperty(prop, `${factor}`); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
In the design doc the suggestion was to have a CSS math impl. of these easing functions, so we only need to manage setting custom properties of index, per item, and item count - perhaps on the root
|
|
||
| // (re)write per-element stagger factors for the full matched set. Runs on initial add and on | ||
| // any list mutation (add/remove routes through addListItems → here), reindexing shifted ordinals. | ||
| _applySequenceStagger(sequenceConfig, sequenceId, sourceKey, sourceController, instance); |
There was a problem hiding this comment.
Perhaps we want to move this lower after we have a constructed the animationGroupArgs?
Also, you're passing sourceController to have the targetController default to it, so that you can take its elements as target, but then below we have _resolveSourceElements which can also return null.
Also, looks like besides the call to Interact.addToSequence() the rest is exactly the same, so maybe simplify, remove duplication, and move this call to the bottom before the call to _attachSequenceTriggers()?
| } | ||
|
|
||
| // (re)write per-element stagger factors for the full matched set (see _applySequenceStagger) | ||
| _applySequenceStagger(sequenceConfig, sequenceId, sourceKey!, sourceController, instance); |
There was a problem hiding this comment.
Same comment as above, perhaps we should move that to the bottom before call to _attachSequenceTriggers()?
|
|
||
| const LIST_PROPERTY_FALLBACKS: Record<ListPropertyName, string> = { | ||
| animation: 'none', | ||
| 'animation-delay': '0s', |
There was a problem hiding this comment.
BTW, why do we need the fallbacks? Perhaps we can just not put anything if there's nothing to add?
Also consider that if there's another animation property overriding, like in another breakpoint, it resets all longhand properties to initial values, i.e. defaults.
| fastdom.mutate(() => { | ||
| targets.forEach(({ element, prop }, ordinal) => { | ||
| // linear easing → factor === ordinal; CSS then resolves `factor * offset + base` per element | ||
| const factor = last > 0 ? easingFn(ordinal / last) * last : 0; |
There was a problem hiding this comment.
BTW, Sequence in motion already has this implemented as private. So we can check whether it makes sense to reuse this impl.
2 participants
Description
Related Issue
Checklist
Screenshots / Demos
Additional Notes