UNPKG

@wizdm/animate

Version:

On Scroll Animation for Angular

wizdm.io/docs/animate

wizdmio/wizdm

75 lines • 11.9 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { state, animate, style, transition, keyframes } from '@angular/animations'; export const zoomIn = [ // Idle states state('idle-zoomIn', style({ opacity: 0 })), state('idle-zoomInDown', style({ opacity: 0 })), state('idle-zoomInLeft', style({ opacity: 0 })), state('idle-zoomInUp', style({ opacity: 0 })), state('idle-zoomInRight', style({ opacity: 0 })), transition('* => zoomIn', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.3)' }), style({ opacity: 1, transform: 'scale(0.65)' }), style({ opacity: 1, transform: 'scale(1)' }) ])), { params: { timing: '1s', delay: '' } }), transition('* => zoomInDown', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.1) translateY(-1000px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.475) translateY(60px)', animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', offset: 0.6 }), style({ opacity: 1, transform: 'scale(1) translateY(0)', offset: 1 }) ])), { params: { timing: '1s', delay: '' } }), transition('* => zoomInLeft', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.1) translateX(-1000px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.475) translateX(60px)', animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', offset: 0.6 }), style({ opacity: 1, transform: 'scale(1) translateX(0)', offset: 1 }) ])), { params: { timing: '1s', delay: '' } }), transition('* => zoomInUp', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.1) translateY(1000px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.475) translateY(-60px)', animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', offset: 0.6 }), style({ opacity: 1, transform: 'scale(1) translateY(0)', offset: 1 }) ])), { params: { timing: '1s', delay: '' } }), transition('* => zoomInRight', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.1) translateX(1000px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.475) translateX(-60px)', animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', offset: 0.6 }), style({ opacity: 1, transform: 'scale(1) translateX(0)', offset: 1 }) ])), { params: { timing: '1s', delay: '' } }) ]; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiem9vbS1pbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2FuaW1hdGUvc3JjL2xpYi9lbnRyYW5jZXMvem9vbS1pbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRW5GLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRztJQUVwQixjQUFjO0lBQ2QsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBRTtJQUM1QyxLQUFLLENBQUMsaUJBQWlCLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUU7SUFDaEQsS0FBSyxDQUFDLGlCQUFpQixFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFFO0lBQ2hELEtBQUssQ0FBQyxlQUFlLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUU7SUFDOUMsS0FBSyxDQUFDLGtCQUFrQixFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFFO0lBRWpELFVBQVUsQ0FBQyxhQUFhLEVBRXRCLE9BQU8sQ0FBQyw4QkFBOEIsRUFFcEMsU0FBUyxDQUFDO1FBQ1IsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLENBQUM7UUFDOUMsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsYUFBYSxFQUFFLENBQUM7UUFDL0MsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLENBQUM7S0FDN0MsQ0FBQyxDQUVILEVBQUUs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QUFFLHdCQUF3QixFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsQ0FBQztLQUN0RSxDQUFDLENBRUgsRUFBRSxFQUFFLE1BQU0sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFDLENBQzFDO0NBRUYsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0YXRlLCBhbmltYXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwga2V5ZnJhbWVzIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XHJcblxyXG5leHBvcnQgY29uc3Qgem9vbUluID0gW1xyXG5cclxuICAvLyBJZGxlIHN0YXRlc1xyXG4gIHN0YXRlKCdpZGxlLXpvb21JbicsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSApLFxyXG4gIHN0YXRlKCdpZGxlLXpvb21JbkRvd24nLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkgKSxcclxuICBzdGF0ZSgnaWRsZS16b29tSW5MZWZ0Jywgc3R5bGUoeyBvcGFjaXR5OiAwIH0pICksXHJcbiAgc3RhdGUoJ2lkbGUtem9vbUluVXAnLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkgKSxcclxuICBzdGF0ZSgnaWRsZS16b29tSW5SaWdodCcsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSApLFxyXG5cclxuICB0cmFuc2l0aW9uKCcqID0+IHpvb21JbicsIFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2UtaW4nLCBcclxuXHJcbiAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICdzY2FsZSgwLjMpJyB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDAuNjUpJyB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDEpJyB9KVxyXG4gICAgICBdKVxyXG5cclxuICAgICksIHsgcGFyYW1zOiB7IHRpbWluZzogJzFzJywgZGVsYXk6ICcnIH19XHJcbiAgKSxcclxuXHJcbiAgdHJhbnNpdGlvbignKiA9PiB6b29tSW5Eb3duJywgXHJcblxyXG4gICAgYW5pbWF0ZSgne3t0aW1pbmd9fSB7e2RlbGF5fX0gZWFzZS1pbicsIFxyXG5cclxuICAgICAga2V5ZnJhbWVzKFtcclxuICAgICAgICBzdHlsZSh7IFxyXG4gICAgICAgICAgb3BhY2l0eTogMCwgXHJcbiAgICAgICAgICB0cmFuc2Zvcm06ICdzY2FsZSgwLjEpIHRyYW5zbGF0ZVkoLTEwMDBweCknLCBcclxuICAgICAgICAgIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOidjdWJpYy1iZXppZXIoMC41NSwgMC4wNTUsIDAuNjc1LCAwLjE5KScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwIFxyXG4gICAgICAgIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgXHJcbiAgICAgICAgICBvcGFjaXR5OiAxLCBcclxuICAgICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuNDc1KSB0cmFuc2xhdGVZKDYwcHgpJywgXHJcbiAgICAgICAgICBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjonY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMSknLCBcclxuICAgICAgICAgIG9mZnNldDogMC42XHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICdzY2FsZSgxKSB0cmFuc2xhdGVZKDApJywgb2Zmc2V0OiAxIH0pXHJcbiAgICAgIF0pXHJcblxyXG4gICAgKSwgeyBwYXJhbXM6IHsgdGltaW5nOiAnMXMnLCBkZWxheTogJycgfX1cclxuICApLFxyXG5cclxuICB0cmFuc2l0aW9uKCcqID0+IHpvb21JbkxlZnQnLCBcclxuXHJcbiAgICBhbmltYXRlKCd7e3RpbWluZ319IHt7ZGVsYXl9fSBlYXNlLWluJywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgXHJcbiAgICAgICAgICBvcGFjaXR5OiAwLCBcclxuICAgICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuMSkgdHJhbnNsYXRlWCgtMTAwMHB4KScsIFxyXG4gICAgICAgICAgYW5pbWF0aW9uVGltaW5nRnVuY3Rpb246J2N1YmljLWJlemllcigwLjU1LCAwLjA1NSwgMC42NzUsIDAuMTkpJywgXHJcbiAgICAgICAgICBvZmZzZXQ6IDAgXHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgc3R5bGUoeyBcclxuICAgICAgICAgIG9wYWNpdHk6IDEsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtOiAnc2NhbGUoMC40NzUpIHRyYW5zbGF0ZVgoNjBweCknLCBcclxuICAgICAgICAgIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOidjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxKScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwLjZcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDEpIHRyYW5zbGF0ZVgoMCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuXHJcbiAgICApLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fVxyXG4gICksXHJcblxyXG4gIHRyYW5zaXRpb24oJyogPT4gem9vbUluVXAnLCBcclxuXHJcbiAgICBhbmltYXRlKCd7e3RpbWluZ319IHt7ZGVsYXl9fSBlYXNlLWluJywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgXHJcbiAgICAgICAgICBvcGFjaXR5OiAwLCBcclxuICAgICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuMSkgdHJhbnNsYXRlWSgxMDAwcHgpJywgXHJcbiAgICAgICAgICBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjonY3ViaWMtYmV6aWVyKDAuNTUsIDAuMDU1LCAwLjY3NSwgMC4xOSknLCBcclxuICAgICAgICAgIG9mZnNldDogMCBcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IFxyXG4gICAgICAgICAgb3BhY2l0eTogMSwgXHJcbiAgICAgICAgICB0cmFuc2Zvcm06ICdzY2FsZSgwLjQ3NSkgdHJhbnNsYXRlWSgtNjBweCknLCBcclxuICAgICAgICAgIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOidjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxKScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwLjZcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDEpIHRyYW5zbGF0ZVkoMCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuXHJcbiAgICApLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fVxyXG4gICksXHJcblxyXG4gIHRyYW5zaXRpb24oJyogPT4gem9vbUluUmlnaHQnLCBcclxuXHJcbiAgICBhbmltYXRlKCd7e3RpbWluZ319IHt7ZGVsYXl9fSBlYXNlLWluJywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgXHJcbiAgICAgICAgICBvcGFjaXR5OiAwLCBcclxuICAgICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuMSkgdHJhbnNsYXRlWCgxMDAwcHgpJywgXHJcbiAgICAgICAgICBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjonY3ViaWMtYmV6aWVyKDAuNTUsIDAuMDU1LCAwLjY3NSwgMC4xOSknLCBcclxuICAgICAgICAgIG9mZnNldDogMCBcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IFxyXG4gICAgICAgICAgb3BhY2l0eTogMSwgXHJcbiAgICAgICAgICB0cmFuc2Zvcm06ICdzY2FsZSgwLjQ3NSkgdHJhbnNsYXRlWCgtNjBweCknLCBcclxuICAgICAgICAgIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOidjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxKScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwLjZcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDEpIHRyYW5zbGF0ZVgoMCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuXHJcbiAgICApLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fVxyXG4gIClcclxuXHJcbl07Il19