Use CSS scroll driven animations rather than JS

[janfaracik]

We currently rely on JavaScript for scroll driven animations to increase the height of the stage view when pinned to the left, as well as increase the position of the scroll to top/bottom controls so they don't overlay the Jenkins version in the bottom right. This does work, however not particularly well. It can be pretty janky (pretty certain it only applies the transforms on whole pixels rather than sub pixels, and it doesn't poll for scrolling very well.

This PR swaps that over for the hot off the press CSS scroll driven animations. These do away with the jank by letting the browser handle the rendering directly. It's much smoother, and also means less JS code to maintain.

Browser support is limited (just Chrome and Edge, Safari Tech Preview) at the moment, but I think it's worth moving to as this is largely cosmetic rather than impacting users.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
https://scroll-driven-animations.style
https://developer.chrome.com/docs/css-ui/scroll-driven-animations

Testing done

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests - that demonstrates feature works or fixes the issue

[felipecrs]

@janfaracik it would be awesome if you could attach some before & after. 😅

[timja]

This still seems to be flashing, still not great imo, better to just overlay the version (or move it a bit higher) than jump how it is.

(tested on chrome, macOS)

[felipecrs]

Yeah.

chrome_1hwRBbIXLP.mp4

[timja]

Polyfill for Firefox might be possible? https://github.com/flackr/scroll-timeline