@wizdm/animate
Version:
On Scroll Animation for Angular
14 lines • 4.07 kB
JavaScript
import { animate, style, transition, keyframes } from '@angular/animations';
export const flip = [
transition('* => flip', [
style({ backfaceVisibility: 'visible' }),
animate('{{timing}} {{delay}} ease-in-out', keyframes([
style({ transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)', animationTimingFunction: 'ease-out', offset: 0 }),
style({ transform: ' perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)', animationTimingFunction: 'ease-out', offset: 0.4 }),
style({ transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)', animationTimingFunction: 'ease-in', offset: 0.5 }),
style({ transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)', animationTimingFunction: 'ease-in', offset: 0.8 }),
style({ transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)', animationTimingFunction: 'ease-in', offset: 1 })
]))
], { params: { timing: '1s', delay: '' } })
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2FuaW1hdGUvc3JjL2xpYi9hdHRlbnRpb24tc2Vla2Vycy9mbGlwLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBUyxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUVuRixNQUFNLENBQUMsTUFBTSxJQUFJLEdBQUc7SUFFbEIsVUFBVSxDQUFDLFdBQVcsRUFBRTtRQUN0QixLQUFLLENBQUMsRUFBRSxrQkFBa0IsRUFBRSxTQUFTLEVBQUUsQ0FBQztRQUN4QyxPQUFPLENBQUMsa0NBQWtDLEVBQ3hDLFNBQVMsQ0FBQztZQUNSLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxxRkFBcUYsRUFBRSx1QkFBdUIsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBRSxDQUFDO1lBQzNKLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSwwRkFBMEYsRUFBRSx1QkFBdUIsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDO1lBQ2xLLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSx5RkFBeUYsRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDO1lBQ2hLLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSwyRkFBMkYsRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDO1lBQ2xLLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxrRkFBa0YsRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBRSxDQUFDO1NBQ3hKLENBQUMsQ0FDSDtLQUFDLEVBQUUsRUFBRSxNQUFNLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsRUFBQyxDQUMzQztDQUNGLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdGF0ZSwgYW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIGtleWZyYW1lcyB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xyXG5cclxuZXhwb3J0IGNvbnN0IGZsaXAgPSBbXHJcblxyXG4gIHRyYW5zaXRpb24oJyogPT4gZmxpcCcsIFtcclxuICAgIHN0eWxlKHsgYmFja2ZhY2VWaXNpYmlsaXR5OiAndmlzaWJsZScgfSksXHJcbiAgICBhbmltYXRlKCd7e3RpbWluZ319IHt7ZGVsYXl9fSBlYXNlLWluLW91dCcsIFxyXG4gICAgICBrZXlmcmFtZXMoW1xyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAncGVyc3BlY3RpdmUoNDAwcHgpIHNjYWxlM2QoMSwgMSwgMSkgdHJhbnNsYXRlM2QoMCwgMCwgMCkgcm90YXRlM2QoMCwgMSwgMCwgLTM2MGRlZyknLCBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjogJ2Vhc2Utb3V0Jywgb2Zmc2V0OiAwIH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAnIHBlcnNwZWN0aXZlKDQwMHB4KSBzY2FsZTNkKDEsIDEsIDEpIHRyYW5zbGF0ZTNkKDAsIDAsIDE1MHB4KSByb3RhdGUzZCgwLCAxLCAwLCAtMTkwZGVnKScsIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOiAnZWFzZS1vdXQnLCBvZmZzZXQ6IDAuNCB9KSxcclxuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3BlcnNwZWN0aXZlKDQwMHB4KSBzY2FsZTNkKDEsIDEsIDEpIHRyYW5zbGF0ZTNkKDAsIDAsIDE1MHB4KSByb3RhdGUzZCgwLCAxLCAwLCAtMTcwZGVnKScsIGFuaW1hdGlvblRpbWluZ0Z1bmN0aW9uOiAnZWFzZS1pbicsIG9mZnNldDogMC41IH0pLFxyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAncGVyc3BlY3RpdmUoNDAwcHgpIHNjYWxlM2QoMC45NSwgMC45NSwgMC45NSkgdHJhbnNsYXRlM2QoMCwgMCwgMCkgcm90YXRlM2QoMCwgMSwgMCwgMGRlZyknLCBhbmltYXRpb25UaW1pbmdGdW5jdGlvbjogJ2Vhc2UtaW4nLCBvZmZzZXQ6IDAuOCB9KSxcclxuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3BlcnNwZWN0aXZlKDQwMHB4KSBzY2FsZTNkKDEsIDEsIDEpIHRyYW5zbGF0ZTNkKDAsIDAsIDApIHJvdGF0ZTNkKDAsIDEsIDAsIDBkZWcpJywgYW5pbWF0aW9uVGltaW5nRnVuY3Rpb246ICdlYXNlLWluJywgb2Zmc2V0OiAxIH0pXHJcbiAgICAgIF0pXHJcbiAgICApXSwgeyBwYXJhbXM6IHsgdGltaW5nOiAnMXMnLCBkZWxheTogJycgfX1cclxuICApXHJcbl07XHJcbiJdfQ==