Refactor portfolio heading proxy scrolling to fix various problems

[Ambient-Impact]

This currently uses the scroll proxy component to scroll titles horizontally on small screens but isn't as smooth as it could be and has some awkward behaviour due to using an Intersection Observer and CSS transitions rather than being controlled directly by viewport scrolling. For example, scrolling quickly past a title from bottom upwards, a scrollable title can be seen to move in the opposite direction and then reverse direction due the scrolling being controlled by an Intersection Observer.

drupal-ambientimpact-site/ambientimpact_site.theme

Line 216 in d333634

'ambientimpact_ux/component.scroll_proxy';

drupal-ambientimpact-site/stylesheets/global/_node_project.scss

Line 205 in d333634

transform: var(--scroll-proxy-transform) var(--bleed-transform);

The Motion One scroll library is fairly small and seems pretty performant on mobile. The GreenSock ScrollTrigger plug-in has some additional features but is larger and probably overkill for this purpose.

---

Follow ups

• Add support for pure CSS scroll-driven animations if the browser supports them, preferring those over the JavaScript implementation as it should be more performant.