YALB-1498: Components: Card animation | YALB-1500: Components Dividers animation | YALB-1502: Components: Quote animation

[joetower]

YALB-1498: Components: Card animation | YALB-1500: Components Dividers animation | YALB-1502: Components: Quote animation

Description of work

• Adds configuration to enable motion in storybook - stores the value in local storage. Sets data attribute on the layout template for [data-site-animation='artistic'].
• Adds JS to respect user's motion preferences while using the intersection observer to add an animate class to components that have the [data-animate-item='true'] attribute.
• Adds animation to card, quote and divider components
• Adds animations based on the artistic theme in Figma: https://www.figma.com/proto/rv05VtG2rBEo3yM9dl9n9P/YaleSites-Motion-Design?type=design&node-id=534-10966&t=LH2mcOKEqMGcdGge-0&scaling=scale-down-width&page-id=534%3A10965&starting-point-node-id=534%3A10966
• If a user has set prefers-reduced-motion = 'true', using JS, [data-animate-item='true'] will change to [data-animate-item='false'] and no animation will be run. The static components will render as they should.

Testing Link(s)

• https://deploy-preview-278--dev-component-library-twig.netlify.app/

Functional Review Steps

• Navigate to this page: https://deploy-preview-278--dev-component-library-twig.netlify.app/?path=/story/page-examples-standard-pages--with-banner

• Verify that components do not animate on scroll as you scroll down the page.

• Navigate to the configuration page in Storybook: https://deploy-preview-278--dev-component-library-twig.netlify.app/?path=/story/config--global-config

• Set "Site Animation Theme" to artistic

yalb-motion-artistic.mp4

• Navigate to a page example, such as : https://deploy-preview-278--dev-component-library-twig.netlify.app/?path=/story/page-examples-standard-pages--with-banner
• Scroll down the page and note that components animate (quote and dividers on scroll, once. cards animate on hover)
• Note: if you scroll back up they do not re-animate

yalb-motion-artistic-components.mp4

• Next, in your operating system settings, disable motion (which will set prefers-reduced-motion = 'true').
  • In macOS: System Preferences > Accessibility > Display > Reduce motion.
  • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
  • In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
• Refresh your page https://deploy-preview-278--dev-component-library-twig.netlify.app/?path=/story/page-examples-standard-pages--with-banner
• Verify the components no longer animate but render as they should, in static form.

Design Review

• Verify the designs match the Figma Designs
• Cards = Version 1
• Divider = Version 2
• Quote = only version

Accessibility Review

• Verify the component meets Accessibility requirements
• Question: should the card components animate on focus? Currently they only rise up on hover.

[netlify]

✅ Deploy Preview for dev-component-library-twig ready!

Name	Link
🔨 Latest commit	ae7ceaa
🔍 Latest deploy log	https://app.netlify.com/sites/dev-component-library-twig/deploys/64d2b982d304220007b9a961
😎 Deploy Preview	https://deploy-preview-278--dev-component-library-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codechefmarc]

Looks great! Tested in Storybook only. Approved!

[dblanken-yale]

Wow, just an awesome job! Loving this PR. All works as expected functionally. Great work!

[kara-franco]

Excellent! Keeping additional motion to hover only is preferred. Users get enough feedback from the focus indicator. For elements like links and tabs/accordions a little motion is fine.

[github-actions]

🎉 This PR is included in version 1.34.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀