chnobli 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animation/Animation.d.ts +36 -0
- package/dist/animation/Animation.d.ts.map +1 -0
- package/dist/animation/Animation.js +230 -0
- package/dist/animation/Animation.js.map +1 -0
- package/dist/animation/public.d.ts +68 -0
- package/dist/animation/public.d.ts.map +1 -0
- package/dist/animation/public.js +115 -0
- package/dist/animation/public.js.map +1 -0
- package/dist/chnobli.d.ts +15 -0
- package/dist/chnobli.d.ts.map +1 -0
- package/dist/chnobli.js +59 -0
- package/dist/chnobli.js.map +1 -0
- package/dist/property/BasicProperty.d.ts +38 -0
- package/dist/property/BasicProperty.d.ts.map +1 -0
- package/dist/property/BasicProperty.js +72 -0
- package/dist/property/BasicProperty.js.map +1 -0
- package/dist/property/ClassProperty.d.ts +32 -0
- package/dist/property/ClassProperty.d.ts.map +1 -0
- package/dist/property/ClassProperty.js +108 -0
- package/dist/property/ClassProperty.js.map +1 -0
- package/dist/property/Property.d.ts +13 -0
- package/dist/property/Property.d.ts.map +1 -0
- package/dist/property/Property.js +22 -0
- package/dist/property/Property.js.map +1 -0
- package/dist/property/StyleProperty.d.ts +25 -0
- package/dist/property/StyleProperty.d.ts.map +1 -0
- package/dist/property/StyleProperty.js +221 -0
- package/dist/property/StyleProperty.js.map +1 -0
- package/dist/property/TransformProperty.d.ts +15 -0
- package/dist/property/TransformProperty.d.ts.map +1 -0
- package/dist/property/TransformProperty.js +43 -0
- package/dist/property/TransformProperty.js.map +1 -0
- package/dist/property/TransformXYProperty.d.ts +28 -0
- package/dist/property/TransformXYProperty.d.ts.map +1 -0
- package/dist/property/TransformXYProperty.js +65 -0
- package/dist/property/TransformXYProperty.js.map +1 -0
- package/dist/responsive/ResponsiveEvent.d.ts +17 -0
- package/dist/responsive/ResponsiveEvent.d.ts.map +1 -0
- package/dist/responsive/ResponsiveEvent.js +45 -0
- package/dist/responsive/ResponsiveEvent.js.map +1 -0
- package/dist/responsive/TestEvent.d.ts +11 -0
- package/dist/responsive/TestEvent.d.ts.map +1 -0
- package/dist/responsive/TestEvent.js +26 -0
- package/dist/responsive/TestEvent.js.map +1 -0
- package/dist/scroll/Scroll.d.ts +40 -0
- package/dist/scroll/Scroll.d.ts.map +1 -0
- package/dist/scroll/Scroll.js +168 -0
- package/dist/scroll/Scroll.js.map +1 -0
- package/dist/scroll/ScrollEvent.d.ts +17 -0
- package/dist/scroll/ScrollEvent.d.ts.map +1 -0
- package/dist/scroll/ScrollEvent.js +39 -0
- package/dist/scroll/ScrollEvent.js.map +1 -0
- package/dist/scroll/index.d.ts +6 -0
- package/dist/scroll/index.d.ts.map +1 -0
- package/dist/scroll/index.js +8 -0
- package/dist/scroll/index.js.map +1 -0
- package/dist/scroll/public.d.ts +17 -0
- package/dist/scroll/public.d.ts.map +1 -0
- package/dist/scroll/public.js +25 -0
- package/dist/scroll/public.js.map +1 -0
- package/dist/stagger/stagger.d.ts +20 -0
- package/dist/stagger/stagger.d.ts.map +1 -0
- package/dist/stagger/stagger.js +43 -0
- package/dist/stagger/stagger.js.map +1 -0
- package/dist/target/BaseTarget.old.d.ts +33 -0
- package/dist/target/BaseTarget.old.d.ts.map +1 -0
- package/dist/target/BaseTarget.old.js +73 -0
- package/dist/target/BaseTarget.old.js.map +1 -0
- package/dist/target/DomTarget.d.ts +41 -0
- package/dist/target/DomTarget.d.ts.map +1 -0
- package/dist/target/DomTarget.js +230 -0
- package/dist/target/DomTarget.js.map +1 -0
- package/dist/target/ObjectTarget.d.ts +30 -0
- package/dist/target/ObjectTarget.d.ts.map +1 -0
- package/dist/target/ObjectTarget.js +101 -0
- package/dist/target/ObjectTarget.js.map +1 -0
- package/dist/target/Target.d.ts +25 -0
- package/dist/target/Target.d.ts.map +1 -0
- package/dist/target/Target.js +25 -0
- package/dist/target/Target.js.map +1 -0
- package/dist/target/TestDomNode.d.ts +14 -0
- package/dist/target/TestDomNode.d.ts.map +1 -0
- package/dist/target/TestDomNode.js +55 -0
- package/dist/target/TestDomNode.js.map +1 -0
- package/dist/timeline/Nested.d.ts +30 -0
- package/dist/timeline/Nested.d.ts.map +1 -0
- package/dist/timeline/Nested.js +51 -0
- package/dist/timeline/Nested.js.map +1 -0
- package/dist/timeline/Timeline.d.ts +41 -0
- package/dist/timeline/Timeline.d.ts.map +1 -0
- package/dist/timeline/Timeline.js +306 -0
- package/dist/timeline/Timeline.js.map +1 -0
- package/dist/timeline/public.d.ts +160 -0
- package/dist/timeline/public.d.ts.map +1 -0
- package/dist/timeline/public.js +388 -0
- package/dist/timeline/public.js.map +1 -0
- package/dist/timing/AnimationFrameTicker.d.ts +32 -0
- package/dist/timing/AnimationFrameTicker.d.ts.map +1 -0
- package/dist/timing/AnimationFrameTicker.js +134 -0
- package/dist/timing/AnimationFrameTicker.js.map +1 -0
- package/dist/timing/Ease.d.ts +6 -0
- package/dist/timing/Ease.d.ts.map +1 -0
- package/dist/timing/Ease.js +15 -0
- package/dist/timing/Ease.js.map +1 -0
- package/dist/timing/TestTicker.d.ts +19 -0
- package/dist/timing/TestTicker.d.ts.map +1 -0
- package/dist/timing/TestTicker.js +81 -0
- package/dist/timing/TestTicker.js.map +1 -0
- package/dist/timing/Ticker.d.ts +14 -0
- package/dist/timing/Ticker.d.ts.map +1 -0
- package/dist/timing/Ticker.js +2 -0
- package/dist/timing/Ticker.js.map +1 -0
- package/dist/timing/Timing.d.ts +71 -0
- package/dist/timing/Timing.d.ts.map +1 -0
- package/dist/timing/Timing.js +276 -0
- package/dist/timing/Timing.js.map +1 -0
- package/dist/timing/easing.d.ts +158 -0
- package/dist/timing/easing.d.ts.map +1 -0
- package/dist/timing/easing.js +273 -0
- package/dist/timing/easing.js.map +1 -0
- package/dist/utils/Events.d.ts +9 -0
- package/dist/utils/Events.d.ts.map +1 -0
- package/dist/utils/Events.js +35 -0
- package/dist/utils/Events.js.map +1 -0
- package/dist/utils/internal.d.ts +5 -0
- package/dist/utils/internal.d.ts.map +1 -0
- package/dist/utils/internal.js +9 -0
- package/dist/utils/internal.js.map +1 -0
- package/dist/utils/motionpath.d.ts +16 -0
- package/dist/utils/motionpath.d.ts.map +1 -0
- package/dist/utils/motionpath.js +41 -0
- package/dist/utils/motionpath.js.map +1 -0
- package/dist/utils/utils.d.ts +44 -0
- package/dist/utils/utils.d.ts.map +1 -0
- package/dist/utils/utils.js +96 -0
- package/dist/utils/utils.js.map +1 -0
- package/dist/values/ColorValue.d.ts +12 -0
- package/dist/values/ColorValue.d.ts.map +1 -0
- package/dist/values/ColorValue.js +133 -0
- package/dist/values/ColorValue.js.map +1 -0
- package/dist/values/StyleValue.d.ts +41 -0
- package/dist/values/StyleValue.d.ts.map +1 -0
- package/dist/values/StyleValue.js +159 -0
- package/dist/values/StyleValue.js.map +1 -0
- package/dist/values/Value.d.ts +13 -0
- package/dist/values/Value.d.ts.map +1 -0
- package/dist/values/Value.js +38 -0
- package/dist/values/Value.js.map +1 -0
- package/dist/values/defaultcolors.d.ts +2 -0
- package/dist/values/defaultcolors.d.ts.map +1 -0
- package/dist/values/defaultcolors.js +149 -0
- package/dist/values/defaultcolors.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { takeProp } from '../utils/internal.js';
|
|
2
|
+
import Timeline from './Timeline.js';
|
|
3
|
+
import { timelineAdd } from './public.js';
|
|
4
|
+
export default class NestedTimeline {
|
|
5
|
+
_defaults;
|
|
6
|
+
_inner;
|
|
7
|
+
constructor(props = {}) {
|
|
8
|
+
this._defaults = takeProp(props, 'defaults', {});
|
|
9
|
+
if ('duration' in props)
|
|
10
|
+
throw new Error('a timeline does not accept a duration');
|
|
11
|
+
this._inner = new Timeline(props);
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Set's properties
|
|
15
|
+
* offset can be staggered, a number, a label or a string `+=10`
|
|
16
|
+
*/
|
|
17
|
+
set(targets, props, offset = null) {
|
|
18
|
+
// for the moment let's just add as usual but set the duration to 0
|
|
19
|
+
return this.add(targets, { ...props, duration: 0 }, offset);
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Add an animation to the timeline
|
|
23
|
+
*
|
|
24
|
+
* offset can be staggered, a number, a label or a string `+=10`
|
|
25
|
+
*/
|
|
26
|
+
add(targets, props, offset = null) {
|
|
27
|
+
timelineAdd(this, targets, props, offset);
|
|
28
|
+
return this;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Adds a label at to the current nOffse
|
|
32
|
+
*
|
|
33
|
+
* This label can then be used in offsets
|
|
34
|
+
*/
|
|
35
|
+
label(label, offset = null) {
|
|
36
|
+
this._inner.label(label, offset);
|
|
37
|
+
return this;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Allows to nest timelines
|
|
41
|
+
*
|
|
42
|
+
* fn: (timeline)
|
|
43
|
+
*/
|
|
44
|
+
nest(fn, opts = {}, offset = null) {
|
|
45
|
+
const tl = new NestedTimeline(opts);
|
|
46
|
+
fn(tl);
|
|
47
|
+
this._inner.addTimeline(tl._inner, offset);
|
|
48
|
+
return this;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=Nested.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Nested.js","sourceRoot":"","sources":["../../src/timeline/Nested.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC,SAAS,CAAsB;IAC/B,MAAM,CAAW;IAEjB,YAAY,QAA6B,EAAE;QAC1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;QAEjD,IAAI,UAAU,IAAI,KAAK;YACtB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAE1D,IAAI,CAAC,MAAM,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;;OAGG;IACH,GAAG,CAAC,OAAY,EAAE,KAA0B,EAAE,SAAc,IAAI;QAC/D,mEAAmE;QACnE,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC7D,CAAC;IAED;;;;OAIG;IACH,GAAG,CAAC,OAAY,EAAE,KAA0B,EAAE,SAAc,IAAI;QAC/D,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAE1C,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,KAAa,EAAE,SAAc,IAAI;QACtC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;OAIG;IACH,IAAI,CACH,EAAgC,EAChC,OAA4B,EAAE,EAC9B,SAAc,IAAI;QAElB,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;QAEpC,EAAE,CAAC,EAAE,CAAC,CAAC;QAEP,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAE3C,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import Timing from '../timing/Timing.js';
|
|
2
|
+
import Ticker from '../timing/Ticker.js';
|
|
3
|
+
/**
|
|
4
|
+
* Timeline is the most versatile class
|
|
5
|
+
*
|
|
6
|
+
* A timeline can contain multiple animation, ordered one after the other or
|
|
7
|
+
* by an offset.
|
|
8
|
+
*/
|
|
9
|
+
export default class Timeline {
|
|
10
|
+
timing: Timing;
|
|
11
|
+
ticker: Ticker;
|
|
12
|
+
private entries;
|
|
13
|
+
private _beforeResponsiveFn;
|
|
14
|
+
private _initialized;
|
|
15
|
+
private _renderQueue;
|
|
16
|
+
constructor(props?: Record<string, any>);
|
|
17
|
+
isFinite(): boolean;
|
|
18
|
+
add(target: any, props: Record<string, any>, offset?: any, relative?: number): this;
|
|
19
|
+
addTimeline(tl: Timeline, offset?: any): void;
|
|
20
|
+
label(label: string, offset?: any): this;
|
|
21
|
+
setBeforeResponsiveFn(fn: () => void): void;
|
|
22
|
+
advance(change: number): void;
|
|
23
|
+
seekMs(ms: number): void;
|
|
24
|
+
seek(pos: number): void;
|
|
25
|
+
/**
|
|
26
|
+
* Returns the position of a label
|
|
27
|
+
*
|
|
28
|
+
* needs to be initialized
|
|
29
|
+
*/
|
|
30
|
+
labelPosition(label: string): number;
|
|
31
|
+
init(): void;
|
|
32
|
+
_initAnimations(reset?: boolean): void;
|
|
33
|
+
render(): void;
|
|
34
|
+
/**
|
|
35
|
+
* Updates the timings of all animations
|
|
36
|
+
*/
|
|
37
|
+
_updateTimings(): void;
|
|
38
|
+
update(): void;
|
|
39
|
+
destroy(): void;
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=Timeline.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/timeline/Timeline.ts"],"names":[],"mappings":"AACA,OAAO,MAON,MAAM,qBAAqB,CAAC;AAC7B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAazC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,OAAO,CAAU;IAEzB,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,YAAY,CAIlB;gBASU,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;IA0B3C,QAAQ,IAAI,OAAO;IAQnB,GAAG,CACF,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,GAAE,GAAU,EAClB,QAAQ,SAAI,GACV,IAAI;IAgBP,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAE,GAAU;IAW5C,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,GAAU,GAAG,IAAI;IAY9C,qBAAqB,CAAC,EAAE,EAAE,MAAM,IAAI;IAIpC,OAAO,CAAC,MAAM,EAAE,MAAM;IAMtB,MAAM,CAAC,EAAE,EAAE,MAAM;IAMjB,IAAI,CAAC,GAAG,EAAE,MAAM;IAMhB;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAUpC,IAAI;IAiDJ,eAAe,CAAC,KAAK,UAAQ;IAyC7B,MAAM;IAmBN;;OAEG;IACH,cAAc;IA0Bd,MAAM;IAyBN,OAAO;CAiBP"}
|
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
import { takeProp } from '../utils/internal.js';
|
|
2
|
+
import Timing, { parseEase, parseRepeat, parseAlternate, parseReversed, STATE_BEFORE, STATE_ENDED, } from '../timing/Timing.js';
|
|
3
|
+
import Animation from '../animation/Animation.js';
|
|
4
|
+
import AnimationFrameTicker from '../timing/AnimationFrameTicker.js';
|
|
5
|
+
/**
|
|
6
|
+
* Timeline is the most versatile class
|
|
7
|
+
*
|
|
8
|
+
* A timeline can contain multiple animation, ordered one after the other or
|
|
9
|
+
* by an offset.
|
|
10
|
+
*/
|
|
11
|
+
export default class Timeline {
|
|
12
|
+
timing;
|
|
13
|
+
ticker;
|
|
14
|
+
entries;
|
|
15
|
+
_beforeResponsiveFn;
|
|
16
|
+
_initialized;
|
|
17
|
+
_renderQueue;
|
|
18
|
+
/*
|
|
19
|
+
{
|
|
20
|
+
ease,
|
|
21
|
+
repeat: -1 - x,
|
|
22
|
+
alternate
|
|
23
|
+
}
|
|
24
|
+
*/
|
|
25
|
+
constructor(props = {}) {
|
|
26
|
+
const nProps = {
|
|
27
|
+
// duration here is not important since it will be calculated
|
|
28
|
+
// based on the animations that get added
|
|
29
|
+
duration: 1000,
|
|
30
|
+
ease: parseEase(takeProp(props, 'ease', null)),
|
|
31
|
+
repeat: parseRepeat(takeProp(props, 'repeat', false)),
|
|
32
|
+
alternate: parseAlternate(takeProp(props, 'alternate', true)),
|
|
33
|
+
reversed: parseReversed(takeProp(props, 'reversed', false)),
|
|
34
|
+
};
|
|
35
|
+
this.timing = new Timing(nProps);
|
|
36
|
+
this.ticker = AnimationFrameTicker.global();
|
|
37
|
+
// { type: label|animation, value: {}, offset, start: x, end: y, render }
|
|
38
|
+
this.entries = [];
|
|
39
|
+
this._beforeResponsiveFn = () => { };
|
|
40
|
+
this._initialized = false;
|
|
41
|
+
this._renderQueue = {
|
|
42
|
+
upcoming: [],
|
|
43
|
+
passed: [],
|
|
44
|
+
active: [],
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
isFinite() {
|
|
48
|
+
return !this.entries.some(e => {
|
|
49
|
+
return e.type === 'animation' && !e.value.isFinite();
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
// relative represents the point which the offset should be taken
|
|
53
|
+
// if relative 1 is done the offset will be taken from the previous - 1
|
|
54
|
+
add(target, props, offset = null, relative = 0) {
|
|
55
|
+
const animation = new Animation(target, this.ticker, props);
|
|
56
|
+
if (!animation.isFinite())
|
|
57
|
+
throw new Error('the animation needs to be finite');
|
|
58
|
+
this.entries.push({
|
|
59
|
+
type: 'animation',
|
|
60
|
+
value: animation,
|
|
61
|
+
offset: new Offset(offset),
|
|
62
|
+
relativeOffset: relative,
|
|
63
|
+
});
|
|
64
|
+
return this;
|
|
65
|
+
}
|
|
66
|
+
addTimeline(tl, offset = null) {
|
|
67
|
+
if (!tl.isFinite())
|
|
68
|
+
throw new Error('the animation needs to be finite');
|
|
69
|
+
this.entries.push({
|
|
70
|
+
type: 'timeline',
|
|
71
|
+
value: tl,
|
|
72
|
+
offset: new Offset(offset),
|
|
73
|
+
relativeOffset: 0,
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
label(label, offset = null) {
|
|
77
|
+
this.entries.push({
|
|
78
|
+
type: 'label',
|
|
79
|
+
value: label,
|
|
80
|
+
offset: new Offset(offset),
|
|
81
|
+
relativeOffset: 0,
|
|
82
|
+
});
|
|
83
|
+
return this;
|
|
84
|
+
}
|
|
85
|
+
// set's a function which get's called before any responsive call
|
|
86
|
+
setBeforeResponsiveFn(fn) {
|
|
87
|
+
this._beforeResponsiveFn = fn;
|
|
88
|
+
}
|
|
89
|
+
advance(change) {
|
|
90
|
+
this.timing.advance(change);
|
|
91
|
+
this._updateTimings();
|
|
92
|
+
}
|
|
93
|
+
seekMs(ms) {
|
|
94
|
+
this.timing.seekMs(ms);
|
|
95
|
+
this._updateTimings();
|
|
96
|
+
}
|
|
97
|
+
seek(pos) {
|
|
98
|
+
this.timing.seek(pos);
|
|
99
|
+
this._updateTimings();
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Returns the position of a label
|
|
103
|
+
*
|
|
104
|
+
* needs to be initialized
|
|
105
|
+
*/
|
|
106
|
+
labelPosition(label) {
|
|
107
|
+
const entry = this.entries.find(e => {
|
|
108
|
+
return e.type === 'label' && e.value === label;
|
|
109
|
+
});
|
|
110
|
+
if (!entry)
|
|
111
|
+
throw new Error('could not find label ' + label);
|
|
112
|
+
return entry.start / this.timing.duration;
|
|
113
|
+
}
|
|
114
|
+
init() {
|
|
115
|
+
if (this._initialized)
|
|
116
|
+
return;
|
|
117
|
+
this._initialized = true;
|
|
118
|
+
let duration = 0;
|
|
119
|
+
const labels = {};
|
|
120
|
+
let i = -1;
|
|
121
|
+
for (const entry of this.entries) {
|
|
122
|
+
i++;
|
|
123
|
+
let offset = entry.offset;
|
|
124
|
+
const label = offset.label();
|
|
125
|
+
if (label) {
|
|
126
|
+
if (!(label in labels))
|
|
127
|
+
throw new Error('could not find label ' + label);
|
|
128
|
+
offset = new Offset(labels[label]);
|
|
129
|
+
}
|
|
130
|
+
const pos = this.entries[i - 1 - entry.relativeOffset]?.end ?? 0;
|
|
131
|
+
let start = offset.calculate(pos);
|
|
132
|
+
if (start < 0)
|
|
133
|
+
throw new Error('cannot go in the past start < 0');
|
|
134
|
+
let end = start;
|
|
135
|
+
if (entry.type === 'animation')
|
|
136
|
+
end += entry.value.duration;
|
|
137
|
+
if (entry.type === 'timeline') {
|
|
138
|
+
entry.value.init();
|
|
139
|
+
end += entry.value.timing.duration;
|
|
140
|
+
}
|
|
141
|
+
if (entry.type === 'label')
|
|
142
|
+
labels[entry.value] = start;
|
|
143
|
+
entry.start = start;
|
|
144
|
+
entry.end = end;
|
|
145
|
+
duration = Math.max(end, duration);
|
|
146
|
+
}
|
|
147
|
+
this.timing.setDuration(duration);
|
|
148
|
+
this._beforeResponsiveFn();
|
|
149
|
+
this._initAnimations();
|
|
150
|
+
}
|
|
151
|
+
_initAnimations(reset = false) {
|
|
152
|
+
// we don't wan't to have a reversed timing
|
|
153
|
+
const reversed = this.timing.reversed;
|
|
154
|
+
this.timing.reversed = false;
|
|
155
|
+
// now initialize all animations
|
|
156
|
+
// initialization means
|
|
157
|
+
// we need to define which value should be used as the from and the to
|
|
158
|
+
// value
|
|
159
|
+
const startOrdered = this.entries.filter(e => {
|
|
160
|
+
return e.type === 'animation' || e.type === 'timeline';
|
|
161
|
+
});
|
|
162
|
+
startOrdered.sort((a, b) => a.start - b.start);
|
|
163
|
+
for (let i = 0; i < startOrdered.length; i++) {
|
|
164
|
+
const entry = startOrdered[i];
|
|
165
|
+
this.timing.seekMs(entry.start);
|
|
166
|
+
const pos = this.timing.positionMs();
|
|
167
|
+
// seek all previous and render
|
|
168
|
+
for (let y = 0; y < i; y++) {
|
|
169
|
+
const prevEntry = startOrdered[y];
|
|
170
|
+
const prevAnimation = prevEntry.value;
|
|
171
|
+
prevAnimation.seekMs(pos - prevEntry.start);
|
|
172
|
+
prevAnimation.render();
|
|
173
|
+
}
|
|
174
|
+
entry.value.init(reset);
|
|
175
|
+
}
|
|
176
|
+
this.timing.reversed = reversed;
|
|
177
|
+
this.timing.seek(-1);
|
|
178
|
+
startOrdered.forEach(e => {
|
|
179
|
+
e.value.seek(-1);
|
|
180
|
+
e.value.render();
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
render() {
|
|
184
|
+
// the rendering order needs to be as follows
|
|
185
|
+
// upcoming
|
|
186
|
+
// passed
|
|
187
|
+
// active
|
|
188
|
+
for (const animation of this._renderQueue.upcoming) {
|
|
189
|
+
animation.render();
|
|
190
|
+
}
|
|
191
|
+
for (const animation of this._renderQueue.passed) {
|
|
192
|
+
animation.render();
|
|
193
|
+
}
|
|
194
|
+
for (const animation of this._renderQueue.active) {
|
|
195
|
+
animation.render();
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* Updates the timings of all animations
|
|
200
|
+
*/
|
|
201
|
+
_updateTimings() {
|
|
202
|
+
this._renderQueue = {
|
|
203
|
+
upcoming: [],
|
|
204
|
+
passed: [],
|
|
205
|
+
active: [],
|
|
206
|
+
};
|
|
207
|
+
const pos = this.timing.positionMsUnbounded();
|
|
208
|
+
for (const entry of this.entries) {
|
|
209
|
+
if (entry.type !== 'animation' && entry.type !== 'timeline')
|
|
210
|
+
continue;
|
|
211
|
+
const animation = entry.value;
|
|
212
|
+
animation.seekMs(pos - entry.start);
|
|
213
|
+
if (animation.timing.state >= STATE_ENDED) {
|
|
214
|
+
this._renderQueue.passed.push(animation);
|
|
215
|
+
}
|
|
216
|
+
else if (animation.timing.state <= STATE_BEFORE) {
|
|
217
|
+
this._renderQueue.upcoming.push(animation);
|
|
218
|
+
}
|
|
219
|
+
else {
|
|
220
|
+
this._renderQueue.active.push(animation);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
update() {
|
|
225
|
+
if (!this._initialized)
|
|
226
|
+
return;
|
|
227
|
+
const pos = this.timing.savePosition();
|
|
228
|
+
const reversed = this.timing.reversed;
|
|
229
|
+
this.timing.reversed = false;
|
|
230
|
+
this.timing.seek(-1);
|
|
231
|
+
this._updateTimings();
|
|
232
|
+
this.render();
|
|
233
|
+
this.ticker.applyTargets();
|
|
234
|
+
this._beforeResponsiveFn();
|
|
235
|
+
// we now have removed every style we set
|
|
236
|
+
// we should be able to recalculate everything now
|
|
237
|
+
this._initAnimations(true);
|
|
238
|
+
this.timing.reversed = reversed;
|
|
239
|
+
this.timing.restorePosition(pos);
|
|
240
|
+
this._updateTimings();
|
|
241
|
+
this.render();
|
|
242
|
+
this.ticker.applyTargets();
|
|
243
|
+
}
|
|
244
|
+
destroy() {
|
|
245
|
+
for (const entry of this.entries) {
|
|
246
|
+
if (entry.type === 'timeline') {
|
|
247
|
+
entry.value.destroy();
|
|
248
|
+
continue;
|
|
249
|
+
}
|
|
250
|
+
if (entry.type !== 'animation')
|
|
251
|
+
continue;
|
|
252
|
+
const animation = entry.value;
|
|
253
|
+
animation.destroy();
|
|
254
|
+
}
|
|
255
|
+
this.entries = [];
|
|
256
|
+
this._beforeResponsiveFn = () => { };
|
|
257
|
+
this.ticker.applyTargets();
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
class Offset {
|
|
261
|
+
type;
|
|
262
|
+
value;
|
|
263
|
+
constructor(offset = null) {
|
|
264
|
+
this.type = 'none';
|
|
265
|
+
this.value = null;
|
|
266
|
+
if (typeof offset === 'number') {
|
|
267
|
+
this.type = 'absolute';
|
|
268
|
+
this.value = offset;
|
|
269
|
+
}
|
|
270
|
+
else if (typeof offset === 'string') {
|
|
271
|
+
if (offset.startsWith('-=')) {
|
|
272
|
+
this.type = 'sub';
|
|
273
|
+
this.value = parseFloat(offset.substring(2));
|
|
274
|
+
}
|
|
275
|
+
else if (offset.startsWith('+=')) {
|
|
276
|
+
this.type = 'add';
|
|
277
|
+
this.value = parseFloat(offset.substring(2));
|
|
278
|
+
}
|
|
279
|
+
else {
|
|
280
|
+
this.type = 'label';
|
|
281
|
+
this.value = offset;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
label() {
|
|
286
|
+
if (this.type !== 'label')
|
|
287
|
+
return null;
|
|
288
|
+
return this.value;
|
|
289
|
+
}
|
|
290
|
+
// this is bullshit
|
|
291
|
+
/* isAbsolute(this: Offset): this is { type: 'absolute'; value: number } {
|
|
292
|
+
return this.type === 'absolute';
|
|
293
|
+
} */
|
|
294
|
+
calculate(pos) {
|
|
295
|
+
if (this.type === 'none')
|
|
296
|
+
return pos;
|
|
297
|
+
if (this.type === 'absolute')
|
|
298
|
+
return this.value;
|
|
299
|
+
if (this.type === 'sub')
|
|
300
|
+
return pos - this.value;
|
|
301
|
+
if (this.type === 'add')
|
|
302
|
+
return pos + this.value;
|
|
303
|
+
throw new Error('cannot calculate for type ' + this.type);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
//# sourceMappingURL=Timeline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../src/timeline/Timeline.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import Timeline from './Timeline.js';
|
|
2
|
+
import Stagger from '../stagger/stagger.js';
|
|
3
|
+
import NestedTimeline from './Nested.js';
|
|
4
|
+
import { Targets } from '../chnobli.js';
|
|
5
|
+
export type Responsive = {
|
|
6
|
+
responsive: () => void;
|
|
7
|
+
};
|
|
8
|
+
export type TimelineProps = {
|
|
9
|
+
defaults?: Record<string, any>;
|
|
10
|
+
responsive?: boolean;
|
|
11
|
+
ease?: (t: number) => number;
|
|
12
|
+
smoothSeek?: SmoothSeekValue;
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
};
|
|
15
|
+
export type Offset = number | string | Stagger<number | string>;
|
|
16
|
+
export default class PublicTimeline {
|
|
17
|
+
/**
|
|
18
|
+
* @ignore
|
|
19
|
+
*/
|
|
20
|
+
_defaults: Record<string, any>;
|
|
21
|
+
private _responsive;
|
|
22
|
+
/**
|
|
23
|
+
* @ignore
|
|
24
|
+
*/
|
|
25
|
+
_inner: Timeline;
|
|
26
|
+
private _events;
|
|
27
|
+
private _triggeredStart;
|
|
28
|
+
private _state;
|
|
29
|
+
private _renderedOnce;
|
|
30
|
+
private _runningTicker;
|
|
31
|
+
private _responsiveBlocks;
|
|
32
|
+
private _responsiveEvent;
|
|
33
|
+
private _smoothSeek;
|
|
34
|
+
private _seekTo;
|
|
35
|
+
constructor(props?: TimelineProps);
|
|
36
|
+
/**
|
|
37
|
+
* Set's properties
|
|
38
|
+
*
|
|
39
|
+
* offset can be staggered, a number, a label or a string `+=10`
|
|
40
|
+
*/
|
|
41
|
+
set(targets: Targets, props: Record<string, any>, offset?: Offset): this;
|
|
42
|
+
/**
|
|
43
|
+
* Add an animation to the timeline
|
|
44
|
+
*
|
|
45
|
+
* offset can be staggered, a number, a label or a string `+=10`
|
|
46
|
+
*/
|
|
47
|
+
add(targets: Targets, props: Record<string, any>, offset?: Offset): this;
|
|
48
|
+
/**
|
|
49
|
+
* Adds a label at to the current nOffset
|
|
50
|
+
*
|
|
51
|
+
* This label can then be used in offsets
|
|
52
|
+
*/
|
|
53
|
+
label(label: string, offset?: any): this;
|
|
54
|
+
/**
|
|
55
|
+
* Allows to nest timelines
|
|
56
|
+
*
|
|
57
|
+
* fn: (timeline)
|
|
58
|
+
*/
|
|
59
|
+
nest(fn: (tl: NestedTimeline) => void, opts?: {}, offset?: any): this;
|
|
60
|
+
/**
|
|
61
|
+
* Adds a responsive function call which get's called before the responsive
|
|
62
|
+
* functions in properties
|
|
63
|
+
*/
|
|
64
|
+
addResponsive(responsive: Responsive | Responsive[]): this;
|
|
65
|
+
/**
|
|
66
|
+
* Starts to play the timeline if it hasn't started
|
|
67
|
+
*/
|
|
68
|
+
play(): this;
|
|
69
|
+
/**
|
|
70
|
+
* Pause the timeline at the current position
|
|
71
|
+
*/
|
|
72
|
+
pause(): void;
|
|
73
|
+
/**
|
|
74
|
+
* Seeks to a position in the timeline
|
|
75
|
+
*/
|
|
76
|
+
seekMs(ms: number): void;
|
|
77
|
+
/**
|
|
78
|
+
* Seeks to a normalized position in the timeline
|
|
79
|
+
*
|
|
80
|
+
* @param pos = number between 0 and 1
|
|
81
|
+
*/
|
|
82
|
+
seek(pos: number): void;
|
|
83
|
+
/**
|
|
84
|
+
* Returns the position of a label
|
|
85
|
+
*/
|
|
86
|
+
labelPosition(label: string): number;
|
|
87
|
+
/**
|
|
88
|
+
* Resets the current timeline to the start
|
|
89
|
+
* without changing anything
|
|
90
|
+
*
|
|
91
|
+
* this operation is not smooth use seek 0 if you wan't that
|
|
92
|
+
*/
|
|
93
|
+
reset(): void;
|
|
94
|
+
/**
|
|
95
|
+
* Resets every used prop to it's previous value
|
|
96
|
+
*/
|
|
97
|
+
resetProps(): void;
|
|
98
|
+
/**
|
|
99
|
+
* Recalculates all values this should be called for example after a resize
|
|
100
|
+
*/
|
|
101
|
+
update(): void;
|
|
102
|
+
/**
|
|
103
|
+
* Returns wether the timeline is set to reversed
|
|
104
|
+
*/
|
|
105
|
+
isReversed(): boolean;
|
|
106
|
+
/**
|
|
107
|
+
* Set's the timeline to a specific direction
|
|
108
|
+
*/
|
|
109
|
+
setReversed(reversed: boolean): void;
|
|
110
|
+
/**
|
|
111
|
+
* Reverses the order of the current timeline
|
|
112
|
+
*/
|
|
113
|
+
reverse(): void;
|
|
114
|
+
/**
|
|
115
|
+
* Listen on events
|
|
116
|
+
*
|
|
117
|
+
* returns a function to remove the event listener
|
|
118
|
+
*
|
|
119
|
+
* ## Events
|
|
120
|
+
*
|
|
121
|
+
* ### end
|
|
122
|
+
* Get's executed once the timeline comes to the end
|
|
123
|
+
* Does not get executed during seeking
|
|
124
|
+
*
|
|
125
|
+
*/
|
|
126
|
+
on(event: string, fn: (...args: any[]) => void): () => void;
|
|
127
|
+
onPromise(event: string): Promise<any>;
|
|
128
|
+
/**
|
|
129
|
+
* Destroys this timeline and resets all props
|
|
130
|
+
*/
|
|
131
|
+
destroy(): void;
|
|
132
|
+
_maybeTriggerEndEvent(): void;
|
|
133
|
+
/**
|
|
134
|
+
* @ignore
|
|
135
|
+
*/
|
|
136
|
+
_startTicker(): void;
|
|
137
|
+
/**
|
|
138
|
+
* @ignore
|
|
139
|
+
*/
|
|
140
|
+
_stopTicker(): void;
|
|
141
|
+
/**
|
|
142
|
+
* @ignore
|
|
143
|
+
*/
|
|
144
|
+
_onResponsive(a: {
|
|
145
|
+
width: number;
|
|
146
|
+
height: number;
|
|
147
|
+
}, b: {
|
|
148
|
+
remove: () => void;
|
|
149
|
+
}): void;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Add an animation to the timeline
|
|
153
|
+
* tl needs to have _defaults, and _inner
|
|
154
|
+
*/
|
|
155
|
+
export declare function timelineAdd(tl: PublicTimeline | NestedTimeline, targets: any, props: Record<string, any>, offset?: any): void;
|
|
156
|
+
export type SmoothSeekValue = number | undefined | {
|
|
157
|
+
duration: number;
|
|
158
|
+
ease?: (t: number) => number;
|
|
159
|
+
};
|
|
160
|
+
//# sourceMappingURL=public.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/timeline/public.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAMrC,OAAO,OAAwB,MAAM,uBAAuB,CAAC;AAG7D,OAAO,cAAc,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOxC,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAE3B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAI/B,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAG7B,UAAU,CAAC,EAAE,eAAe,CAAC;IAO7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAEhE,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,OAAO,CAAC,WAAW,CAAU;IAE7B;;OAEG;IACH,MAAM,EAAE,QAAQ,CAAC;IAEjB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,eAAe,CAAU;IAEjC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,iBAAiB,CAA+B;IACxD,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,OAAO,CAAS;gBAEZ,KAAK,GAAE,aAAkB;IAwCrC;;;;OAIG;IACH,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxE;;;;OAIG;IACH,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAMxE;;;;OAIG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,GAAU,GAAG,IAAI;IAM9C;;;;OAIG;IAEH,IAAI,CACH,EAAE,EAAE,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,EAChC,IAAI,KAAK,EACT,MAAM,GAAE,GAAU,GAChB,IAAI;IAUP;;;OAGG;IACH,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI;IAiB1D;;OAEG;IACH,IAAI,IAAI,IAAI;IAUZ;;OAEG;IACH,KAAK;IAQL;;OAEG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM;IAWjB;;;;OAIG;IACH,IAAI,CAAC,GAAG,EAAE,MAAM;IAiBhB;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IASpC;;;;;OAKG;IACH,KAAK;IAIL;;OAEG;IACH,UAAU;IAWV;;OAEG;IACH,MAAM;IAIN;;OAEG;IACH,UAAU,IAAI,OAAO;IAIrB;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,OAAO;IAK7B;;OAEG;IACH,OAAO;IAMP;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,MAAM,IAAI;IAK3D,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IAItC;;OAEG;IACH,OAAO;IAUP,qBAAqB;IAOrB;;OAEG;IACH,YAAY;IAgDZ;;OAEG;IACH,WAAW;IAOX;;OAEG;IACH,aAAa,CACZ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EACpC,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE;CAO1B;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAC1B,EAAE,EAAE,cAAc,GAAG,cAAc,EACnC,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,GAAE,GAAU,QAsBlB;AAED,MAAM,MAAM,eAAe,GACxB,MAAM,GACN,SAAS,GACT;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAAE,CAAC"}
|