I am encountering issues with animating the mask-position property using Angular's animation library and I am seeking assistance in identifying where my mistake lies.
This method is successful:
@keyframes maskWipe{
from {mask-position: 100% 0;}
to {mask-position: 0 0;}
}
However, when attempting to implement it in Angular, the animation simply 'pops' instead of smoothly transitioning.
This is my current Angular animation code:
animations: [
trigger('slideInOut', [
state('slideIn', style({
webkitMaskPosition: "0 0"
})),
state('slideOut', style({
webkitMaskPosition: "100% 0"
})),
transition('slideIn => slideOut', [
animate('2s', keyframes([
style({webkitMaskPosition: '0 0'}),
style({webkitMaskPosition: "100% 0"})
]))
]),
transition('slideOut => slideIn', [
animate('2s', keyframes([
style({webkitMaskPosition: "100% 0"}),
style({webkitMaskPosition: "0 0"})
]))
]),
]),
],
Please note that I had to use webkitMaskPosition because I am working in Chrome, which automatically converts mask-position to webkit-mask-position.
[Edit]: I forgot to remove the commented out sections.