I'm using @angular/animations, but when i use the property "offset" in order to make a stagger effect, in Safari blocks the execution of the entire website. After having removed it, it start running correctly again.
This is my piece of animation:
const staggerOpacTrans = [
transition('* => *', [
query(':enter', style({ opacity: 0 }), { optional: true }),
query(':enter', stagger('100ms', [
animate('.5s ease-in-out', keyframes([
style({ opacity: 0, transform: 'translateY(20px)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
]))]), { optional: true })
]),]
export const staggerOpacTransAnimation = trigger('staggerOpacTransAnimation', staggerOpacTrans);
I've tried installing this polyfill: 'web-animations-js' and importing it in polyfills.ts, but still it doesn't work.
Has anyone ever had problems with offset property animation browsing with Safari? All the other browser supports that feature perfectly.