UNPKG

@wizdm/animate

Version:

On Scroll Animation for Angular

wizdm.io/docs/animate

wizdmio/wizdm

52 lines • 9.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
import { state, animate, style, transition, keyframes } from '@angular/animations'; export const bounceOut = [ // Ending states state('bounceOut', style({ opacity: 0 })), state('bounceOutDown', style({ opacity: 0 })), state('bounceOutUp', style({ opacity: 0 })), state('bounceOutRight', style({ opacity: 0 })), state('bounceOutLeft', style({ opacity: 0 })), // Transitions transition('* => bounceOut', [ style({ opacity: 1 }), animate('{{timing}} {{delay}} ease-out', keyframes([ style({ transform: 'scale(0.9)', offset: 0.2 }), style({ transform: 'scale(1.1)', offset: 0.5 }), style({ transform: 'scale(1.1)', offset: 0.55 }), style({ opacity: 0, transform: 'scale(0.3)', offset: 1 }) ])) ], { params: { timing: '750ms', delay: '' } }), transition('* => bounceOutDown', [ style({ opacity: 1 }), animate('{{timing}} {{delay}} ease-out', keyframes([ style({ transform: 'translateY(10px)', offset: 0.2 }), style({ transform: 'translateY(-20px)', offset: 0.4 }), style({ transform: 'translateY(-20px)', offset: 0.45 }), style({ opacity: 0, transform: 'translateY(2000px)', offset: 1 }) ])) ], { params: { timing: '1s', delay: '' } }), transition('* => bounceOutUp', [ style({ opacity: 1 }), animate('{{timing}} {{delay}} ease-out', keyframes([ style({ transform: 'translateY(-10px)', offset: 0.2 }), style({ transform: 'translateY(20px)', offset: 0.4 }), style({ transform: 'translateY(20px)', offset: 0.45 }), style({ opacity: 0, transform: 'translateY(-2000px)', offset: 1 }) ])) ], { params: { timing: '1s', delay: '' } }), transition('* => bounceOutRight', [ style({ opacity: 1 }), animate('{{timing}} {{delay}} ease-out', keyframes([ style({ transform: 'translateX(-20px)', offset: 0.2 }), style({ opacity: 0, transform: 'translateX(2000px)', offset: 1 }) ])) ], { params: { timing: '1s', delay: '' } }), transition('* => bounceOutLeft', [ style({ opacity: 1 }), animate('{{timing}} {{delay}} ease-out', keyframes([ style({ transform: 'translateX(20px)', offset: 0.2 }), style({ opacity: 0, transform: 'translateX(-2000px)', offset: 1 }) ])) ], { params: { timing: '1s', delay: '' } }) ]; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm91bmNlLW91dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2FuaW1hdGUvc3JjL2xpYi9leGl0cy9ib3VuY2Utb3V0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFbkYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHO0lBRXZCLGdCQUFnQjtJQUNoQixLQUFLLENBQUMsV0FBVyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3pDLEtBQUssQ0FBQyxlQUFlLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDN0MsS0FBSyxDQUFDLGFBQWEsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUMzQyxLQUFLLENBQUMsZ0JBQWdCLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDOUMsS0FBSyxDQUFDLGVBQWUsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUU3QyxjQUFjO0lBQ2QsVUFBVSxDQUFDLGdCQUFnQixFQUFFO1FBRTNCLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQztRQUVyQixPQUFPLENBQUMsK0JBQStCLEVBRXJDLFNBQVMsQ0FBQztZQUNSLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDO1lBQy9DLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDO1lBQy9DLEtBQUssQ0FBQyxFQUFFLFNB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Q0FBQyxFQUFFLFNBQVMsRUFBRSxxQkFBcUIsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7U0FDbkUsQ0FBQyxDQUNIO0tBQ0YsRUFBRSxFQUFFLE1BQU0sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFDLENBQUU7Q0FDNUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0YXRlLCBhbmltYXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwga2V5ZnJhbWVzIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XHJcblxyXG5leHBvcnQgY29uc3QgYm91bmNlT3V0ID0gW1xyXG5cclxuICAvLyBFbmRpbmcgc3RhdGVzXHJcbiAgc3RhdGUoJ2JvdW5jZU91dCcsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSksXHJcbiAgc3RhdGUoJ2JvdW5jZU91dERvd24nLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpLFxyXG4gIHN0YXRlKCdib3VuY2VPdXRVcCcsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSksXHJcbiAgc3RhdGUoJ2JvdW5jZU91dFJpZ2h0Jywgc3R5bGUoeyBvcGFjaXR5OiAwIH0pKSxcclxuICBzdGF0ZSgnYm91bmNlT3V0TGVmdCcsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSksXHJcblxyXG4gIC8vIFRyYW5zaXRpb25zXHJcbiAgdHJhbnNpdGlvbignKiA9PiBib3VuY2VPdXQnLCBbXHJcblxyXG4gICAgc3R5bGUoeyBvcGFjaXR5OiAxIH0pLFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2Utb3V0JywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoMC45KScsIG9mZnNldDogMC4yIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoMS4xKScsIG9mZnNldDogMC41IH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoMS4xKScsIG9mZnNldDogMC41NSB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3NjYWxlKDAuMyknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuICAgIClcclxuICBdLCB7IHBhcmFtczogeyB0aW1pbmc6ICc3NTBtcycsIGRlbGF5OiAnJyB9fSApLFxyXG5cclxuICB0cmFuc2l0aW9uKCcqID0+IGJvdW5jZU91dERvd24nLCBbXHJcblxyXG4gICAgc3R5bGUoeyBvcGFjaXR5OiAxIH0pLFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2Utb3V0JywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgxMHB4KScsIG9mZnNldDogMC4yIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgtMjBweCknLCBvZmZzZXQ6IDAuNCB9KSxcclxuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoLTIwcHgpJywgb2Zmc2V0OiAwLjQ1IH0pLFxyXG4gICAgICAgIHN0eWxlKHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgyMDAwcHgpJywgb2Zmc2V0OiAxIH0pXHJcbiAgICAgIF0pXHJcbiAgICApXHJcbiAgXSwgeyBwYXJhbXM6IHsgdGltaW5nOiAnMXMnLCBkZWxheTogJycgfX0gKSxcclxuXHJcbiAgdHJhbnNpdGlvbignKiA9PiBib3VuY2VPdXRVcCcsIFtcclxuXHJcbiAgICBzdHlsZSh7IG9wYWNpdHk6IDEgfSksXHJcblxyXG4gICAgYW5pbWF0ZSgne3t0aW1pbmd9fSB7e2RlbGF5fX0gZWFzZS1vdXQnLCBcclxuXHJcbiAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC0xMHB4KScsIG9mZnNldDogMC4yIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgyMHB4KScsIG9mZnNldDogMC40IH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgyMHB4KScsIG9mZnNldDogMC40NSB9KSxcclxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoLTIwMDBweCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuICAgIClcclxuICBdLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fSApLFxyXG5cclxuICB0cmFuc2l0aW9uKCcqID0+IGJvdW5jZU91dFJpZ2h0JywgW1xyXG5cclxuICAgIHN0eWxlKHsgb3BhY2l0eTogMSB9KSxcclxuXHJcbiAgICBhbmltYXRlKCd7e3RpbWluZ319IHt7ZGVsYXl9fSBlYXNlLW91dCcsIFxyXG5cclxuICAgICAga2V5ZnJhbWVzKFtcclxuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTIwcHgpJywgb2Zmc2V0OiAwLjIgfSksXHJcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDIwMDBweCknLCBvZmZzZXQ6IDEgfSlcclxuICAgICAgXSlcclxuICAgIClcclxuICBdLCB7IHBhcmFtczogeyB0aW1pbmc6ICcxcycsIGRlbGF5OiAnJyB9fSApLFxyXG5cclxuICB0cmFuc2l0aW9uKCcqID0+IGJvdW5jZU91dExlZnQnLCBbXHJcblxyXG4gICAgc3R5bGUoeyBvcGFjaXR5OiAxIH0pLFxyXG5cclxuICAgIGFuaW1hdGUoJ3t7dGltaW5nfX0ge3tkZWxheX19IGVhc2Utb3V0JywgXHJcblxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgyMHB4KScsIG9mZnNldDogMC4yIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtMjAwMHB4KScsIG9mZnNldDogMSB9KVxyXG4gICAgICBdKVxyXG4gICAgKVxyXG4gIF0sIHsgcGFyYW1zOiB7IHRpbWluZzogJzFzJywgZGVsYXk6ICcnIH19IClcclxuXTsiXX0=