Polyfill not working for animation-timeline: view() and animation-range

[acusti]

this might be a known issue with the polyfill, but it didn’t look like some of the issues i saw mentioned in other places, e.g. #151 (i am using animation-range but i’m using it with ViewTimeline, not ScrollTimeline). it might be related to this comment, but i’m not sure.

i made a codepen as a demonstration (debug view has just the demo HTML). i’m seeing two issues:

the first is an issue with the .layout-bb figure.img-grid (the second section on the page). it has some subtle animations on the .img-grid itself (the scroll-down animation takes it from transform: translateY(70px) scale(.95); → transform: translateY(0) scale(1);) and on the h6 and p elements to fade in and up (from the scroll-up animation). all of those elements have animation-timeline: view(); animation-range: 40px 250px;.

the second is for the .layout-ee .gram-grid styles (the second to last section on the page). the <img> elements in the .gram-grid are supposed to transition from opacity: 0 to opacity: 1 and from translate(100%) to translate(0%) thanks to the gram-grid animation, but that animation isn’t getting triggered.

note that the animation at the top (.hero-ac .bg-img) is being handled successfully. in that case, the element has animation-timeline: view(); animation-range: exit; and is associated with bg-animation.

thanks to all of the contributors for this resource! it’s all very exciting stuff. and if this issue should be closed and this should be added on to #163 or another existing issue, i’m happy to help with that. i was going to just chime in on 163 but this comment made me think i should create a new issue and document it thoroughly.

[johannesodland]

I think this is caused due to an error parsing the animation-range. Right now it only supports percentages.

This should be solved once https://github.com/flackr/scroll-timeline/pull/153 and https://github.com/flackr/scroll-timeline/pull/209 are merged.

[bramus]

@acusti The two PRs @johannesodland mentioned got merged over the weekend. Checking your demo page in Firefox with the polyfill, it all seems to work fine.

Can you confirm and close this issue if all is good?

[codysign]

@bramus Since the last update it isn't working in Safari (v17) anymore. This issue can be tested with your linked demo page.

[acusti]

@bramus thanks for pinging me! for me, the demo page is now behaving correctly in safari (v17.2.1).

@codysign, when you say it isn’t working in safari any more, are you talking about that demo page i made? if so, what’s the behavior you’re seeing? no animations working or only some of them not working? and what version of safari specifically are you using?

[bramus]

Closing as @acusti mentioned the bug is fixed.

Not sure why it’s not working for @codysign. Works fine here, tested with Safari on macOS. If the problem persists, please open a new bug.

[codysign]

@bramus Today, it is working as expected ;-) everything's fine, thanks