use CSS transitions and transforms in horizontal scroll

[radium-v]

Pull Request

📖 Description

• Converts the scrolling animation for the horizontal scroll component to use CSS transitions and transforms.
• Moves ResizeObserver and IntersectionService files to src/utilities in fast-foundation
• Adds parts to internal components of the horizontal scroller template

🎫 Issues

👩‍💻 Reviewer Notes

The first approach used requestAnimationFrame to approximate the screen refresh rate. This new approach uses CSS transforms in conjunction with scrolling to transition the contents into place. On transitionend, we then set scrollLeft on the same frame that we remove the transform. The key is that the transition-duration is set to 0s while this happens.

📑 Test Plan

Tested in Chrome, Edge, and Firefox at 60hz, 120hz, 165hz, and 240hz.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

[chrisdholt]

This is great - thank you!

[chrisdholt]

Thanks for this @radium-v!

[chrisdholt]

Also, I pulled this down, built, smoked - definitely smoother on my mac :)

[eljefe223]

Smooth like butter, Thanks for doing this John!