scroll-timeline
scroll-timeline copied to clipboard
Published
20 hours ago •
flackr
flackr
Can't get working in firefox/safari. Am I missing something?
trafficstars
Am I missing something about how this is supposed to work? I have the following setup which is working in Chrome natively, but I have yet to get either of these to work with the polyfill in Firefox/Safari
index.html:
<head>
...
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
<style>
header {
animation: scroll-shadow linear both;
animation-timeline: scroll();
animation-range: 0rem 4rem;
}
@keyframes scroll-shadow {
from {
box-shadow: none;
}
to {
box-shadow: var(--shadow);
}
}
.sub-header {
--distance: 10rem;
--animation-range:
entry calc(100cqh - var(--scroll-margin, 0px))
entry calc(100cqh - var(--scroll-margin, 0px) + var(--distance));
animation: fade-in linear both;
animation-timeline: view();
animation-range: var(--animation-range);
}
@keyframes fade-in {
from {
opacity: 0;
height: 1px;
}
to {
opacity: 1;
height: auto;
}
}
</style>
</head>
Looks like it's related to some of the parsing. It looks like if I change "rem" to "px" the top one works.
I'm not quite sure the best way to do the other one as I'm guessing cqh isn't supported.