Motion animations should occur when they're scrolled into view?

[ghost]

As we are using framer-motion already in our nextjs app, we have the option of animating our motion elements as they come into the viewport. It seems this ability is now built into motion with the whileInView option.

This hasn't been provided by the UX team as an option, however I don't think this sort of 'flare' hasn't been in the Jisc mind before?

If so, we must keep in mind that this sort of on scroll animation can be very jarring, so any 'shifting' elements should only occur if the users system doesn't specify prefers-reduced-motion.

This would be a good first issue for an outside-the-team, or out of the Octopus team feature request.

Thoughts appreciated.

Reference code