UNPKG

@wizdm/animate

Version:

On Scroll Animation for Angular

wizdm.io/docs/animate

wizdmio/wizdm

79 lines • 12.4 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
76
77
78
79
import { state, animate, style, transition, keyframes } from '@angular/animations'; export const zoomOut = [ // Ending states state('zoomOut', style({ opacity: 0 })), state('zoomOutDown', style({ opacity: 0 })), state('zoomOutRight', style({ opacity: 0 })), state('zoomOutUp', style({ opacity: 0 })), state('zoomOutLeft', style({ opacity: 0 })), transition('* => zoomOut', animate('{{timing}} {{delay}} ease-out', keyframes([ style({ opacity: 1, transform: 'scale(1)' }), style({ opacity: 0, transform: 'scale(0.3)' }), style({ opacity: 0, transform: 'scale(0.3)' }) ])), { params: { timing: '1s', delay: '' } }), transition('* => zoomOutDown', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.475) translateY(-60px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.1) translateY(2000px)', transformOrigin: 'center bottom', animationTimingFunction: 'ubic-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('* => zoomOutRight', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.475) translateX(-42px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.1) translateX(2000px)', transformOrigin: 'center bottom', animationTimingFunction: 'ubic-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('* => zoomOutUp', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.475) translateY(60px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.1) translateY(-2000px)', transformOrigin: 'center bottom', animationTimingFunction: 'ubic-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('* => zoomOutLeft', animate('{{timing}} {{delay}} ease-in', keyframes([ style({ opacity: 0, transform: 'scale(0.475) translateX(42px)', animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', offset: 0 }), style({ opacity: 1, transform: 'scale(0.1) translateX(-2000px)', transformOrigin: 'center bottom', animationTimingFunction: 'ubic-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiem9vbS1vdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9hbmltYXRlL3NyYy9saWIvZXhpdHMvem9vbS1vdXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUVuRixNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUc7SUFFckIsZ0JBQWdCO0lBQ2hCLEtBQUssQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDdkMsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUMzQyxLQUFLLENBQUMsY0FBYyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQzVDLEtBQUssQ0FBQyxXQUFXLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDekMsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUUzQyxVQUFVLENBQUMsY0FBYyxFQUV2QixPQUFPLENBQUMsK0JBQStCLEVBQ3JDLFNBQVMsQ0FBQztRQUNSLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxDQUFDO1FBQzVDLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxDQUFDO1FBQzlDLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxDQUFDO0tBQy9DLENBQUMsQ0FDSCxFQUFFLEVBQUUs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QW9DO1lBQzVELE1BQU0sRUFBRSxHQUFHO1NBQ1osQ0FBQztRQUNGLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsQ0FBQztLQUN0RSxDQUFDLENBRUgsRUFBRSxFQUFFLE1BQU0sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFDLENBQzFDO0NBQ0YsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0YXRlLCBhbmltYXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwga2V5ZnJhbWVzIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XHJcblxyXG5leHBvcnQgY29uc3Qgem9vbU91dCA9IFtcclxuXHJcbiAgLy8gRW5kaW5nIHN0YXRlc1xyXG4gIHN0YXRlKCd6b29tT3V0Jywgc3R5bGUoeyBvcGFjaXR5OiAwIH0pKSxcclxuICBzdGF0ZSgnem9vbU91dERvd24nLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpLFxyXG4gIHN0YXRlKCd6b29tT3V0UmlnaHQnLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpLFxyXG4gIHN0YXRlKCd6b29tT3V0VXAnLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpLFxyXG4gIHN0YXRlKCd6b29tT3V0TGVmdCcsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSksXHJcblxyXG4gIHRyYW5zaXRpb24oJyogPT4gem9vbU91dCcsIFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2Utb3V0JywgXHJcbiAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICdzY2FsZSgxKScgfSksXHJcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICdzY2FsZSgwLjMpJyB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3NjYWxlKDAuMyknIH0pXHJcbiAgICAgIF0pXHJcbiAgICApLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fVxyXG4gICksXHJcblxyXG4gIHRyYW5zaXRpb24oJyogPT4gem9vbU91dERvd24nLCBcclxuXHJcbiAgICBhbmltYXRlKCd7e3RpbWluZ319IHt7ZGVsYXl9fSBlYXNlLWluJywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgXHJcbiAgICAgICAgICBvcGFjaXR5OiAwLCBcclxuICAgICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuNDc1KSB0cmFuc2xhdGVZKC02MHB4KScsIFxyXG4gICAgICAgICAgYW5pbWF0aW9uVGltaW5nRnVuY3Rpb246J2N1YmljLWJlemllcigwLjU1LCAwLjA1NSwgMC42NzUsIDAuMTkpJywgXHJcbiAgICAgICAgICBvZmZzZXQ6IDAgXHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgc3R5bGUoeyBcclxuICAgICAgICAgIG9wYWNpdHk6IDEsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtOiAnc2NhbGUoMC4xKSB0cmFuc2xhdGVZKDIwMDBweCknLCBcclxuICAgICAgICAgIHRyYW5zZm9ybU9yaWdpbjogJ2NlbnRlciBib3R0b20nLFxyXG4gICAgICAgICAgYW5pbWF0aW9uVGltaW5nRnVuY3Rpb246J3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMSknLCBcclxuICAgICAgICAgIG9mZnNldDogMC42XHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICdzY2FsZSgxKSB0cmFuc2xhdGVZKDApJywgb2Zmc2V0OiAxIH0pXHJcbiAgICAgIF0pXHJcblxyXG4gICAgKSwgeyBwYXJhbXM6IHsgdGltaW5nOiAnMXMnLCBkZWxheTogJycgfX1cclxuICApLFxyXG5cclxuICB0cmFuc2l0aW9uKCcqID0+IHpvb21PdXRSaWdodCcsIFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2UtaW4nLCBcclxuXHJcbiAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgc3R5bGUoeyBcclxuICAgICAgICAgIG9wYWNpdHk6IDAsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtOiAnc2NhbGUoMC40NzUpIHRyYW5zbGF0ZVgoLTQycHgpJywgXHJcbiAgICAgICAgICBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjonY3ViaWMtYmV6aWVyKDAuNTUsIDAuMDU1LCAwLjY3NSwgMC4xOSknLCBcclxuICAgICAgICAgIG9mZnNldDogMCBcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IFxyXG4gICAgICAgICAgb3BhY2l0eTogMSwgXHJcbiAgICAgICAgICB0cmFuc2Zvcm06ICdzY2FsZSgwLjEpIHRyYW5zbGF0ZVgoMjAwMHB4KScsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiAnY2VudGVyIGJvdHRvbScsXHJcbiAgICAgICAgICBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjondWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxKScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwLjZcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDEpIHRyYW5zbGF0ZVgoMCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuXHJcbiAgICApLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fVxyXG4gICksXHJcblxyXG4gIHRyYW5zaXRpb24oJyogPT4gem9vbU91dFVwJywgXHJcblxyXG4gICAgYW5pbWF0ZSgne3t0aW1pbmd9fSB7e2RlbGF5fX0gZWFzZS1pbicsIFxyXG5cclxuICAgICAga2V5ZnJhbWVzKFtcclxuICAgICAgICBzdHlsZSh7IFxyXG4gICAgICAgICAgb3BhY2l0eTogMCwgXHJcbiAgICAgICAgICB0cmFuc2Zvcm06ICdzY2FsZSgwLjQ3NSkgdHJhbnNsYXRlWSg2MHB4KScsIFxyXG4gICAgICAgICAgYW5pbWF0aW9uVGltaW5nRnVuY3Rpb246J2N1YmljLWJlemllcigwLjU1LCAwLjA1NSwgMC42NzUsIDAuMTkpJywgXHJcbiAgICAgICAgICBvZmZzZXQ6IDAgXHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgc3R5bGUoeyBcclxuICAgICAgICAgIG9wYWNpdHk6IDEsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtOiAnc2NhbGUoMC4xKSB0cmFuc2xhdGVZKC0yMDAwcHgpJywgXHJcbiAgICAgICAgICB0cmFuc2Zvcm1PcmlnaW46ICdjZW50ZXIgYm90dG9tJyxcclxuICAgICAgICAgIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOid1YmljLWJlemllcigwLjE3NSwgMC44ODUsIDAuMzIsIDEpJywgXHJcbiAgICAgICAgICBvZmZzZXQ6IDAuNlxyXG4gICAgICAgIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiAnc2NhbGUoMSkgdHJhbnNsYXRlWSgwKScsIG9mZnNldDogMSB9KVxyXG4gICAgICBdKVxyXG5cclxuICAgICksIHsgcGFyYW1zOiB7IHRpbWluZzogJzFzJywgZGVsYXk6ICcnIH19XHJcbiAgKSxcclxuXHJcbiAgdHJhbnNpdGlvbignKiA9PiB6b29tT3V0TGVmdCcsIFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2UtaW4nLCBcclxuXHJcbiAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgc3R5bGUoeyBcclxuICAgICAgICAgIG9wYWNpdHk6IDAsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtOiAnc2NhbGUoMC40NzUpIHRyYW5zbGF0ZVgoNDJweCknLCBcclxuICAgICAgICAgIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOidjdWJpYy1iZXppZXIoMC41NSwgMC4wNTUsIDAuNjc1LCAwLjE5KScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwIFxyXG4gICAgICAgIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgXHJcbiAgICAgICAgICBvcGFjaXR5OiAxLCBcclxuICAgICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuMSkgdHJhbnNsYXRlWCgtMjAwMHB4KScsIFxyXG4gICAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiAnY2VudGVyIGJvdHRvbScsXHJcbiAgICAgICAgICBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjondWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxKScsIFxyXG4gICAgICAgICAgb2Zmc2V0OiAwLjZcclxuICAgICAgICB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ3NjYWxlKDEpIHRyYW5zbGF0ZVgoMCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuXHJcbiAgICApLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fVxyXG4gIClcclxuXTsiXX0=