Timeline polyfill for Safari
npm install safari-timeline-polyfill1. Set additional animation-timeline and animation-range, through CSS variables as shown below. This is necessary to avoid parsing and resolving many CSS styles at runtime and which helps in improving performance.
2. And you must write CSS in such a way that animation-play-state: pause must be set only for non supported browsers as shown below.
``html`
`css
@keyframes rotate-1 {
0% {
rotate: 0deg;
}
20% {
rotate: 60deg;
}
40% {
rotate: 120deg;
}
60% {
rotate: 180deg;
}
80% {
rotate: 240deg;
}
100% {
rotate: 360deg;
}
}
@keyframes zoom-out {
0% {
scale: 1;
}
100% {
scale: 0.2;
}
}
--default-animation-play-state: unset;
@supports not (animation-timeline: any) {
--default-animation-play-state: paused;
}
scroll-aware[on-scroll] {
animation: rotate-1 linear both;
/* Create following variables to map to animation-name /
--rotate-1-animation-timeline: scroll();
--rotate-1-animation-range: 0 20%;
animation-timeline: var(--rotate-1-animation-timeline);
animation-range: var(--rotate-1-animation-range);
animation-duration: 1ms;
animation-play-state: var(--default-animation-play-state);
}
scroll-aware[on-above] {
animation: zoom-out linear both;
/* Create following variables to map to animation-name /
--zoom-out-animation-timeline: view();
--zoom-out-animation-range: exit-crossing 0 exit-crossing 100%;
animation-timeline: var(--zoom-out-animation-timeline);
animation-range: var(--zoom-out-animation-range);
animation-duration: 1ms;
animation-play-state: var(--default-animation-play-state);
}
`
`html
A
B
``
You can use classes as well, we have shown the sample as it can work with any combination of CSS.