chore(deps): Bump `framer-motion`

[nandereck]

Reference

• 🎟️ Asana Task
• 🔍 Preview Link
• web PR

Description

We are currently using an old version of framer-motion. The most recent version offers new, useful functionality. This PR does several things:

• bumps framer-motion to the latest for react-components
• bumps framer-motion to the latest for react-notification and react-motion-config
• updates MotionConfig features

MotionConfig features

MotionConfig is used across our properties and it allows us to reduce our bundle size by lazy loading specific framer-motion features. Previously, we hand-picked features to load but it looks like this is no longer supported. This PR updates MotionConfig to use domMax instead of hand-picked features. When this change was tested before, I believe the difference in bundle size was pretty small (which was the reason why we hand-picked features initially).

Validation Steps

In order to test this change, I've created a PR in web that bumps framer-motion and uses the canary releases for these components.

Home

• [ ] Navigate to the preview of www that uses the canary releases for this PR
• [ ] Validate that the homepage hero fades in and out when switching items in the carousel
• [ ] Scroll down to the tabbed component showing customer testimonials
• [ ] Validate that the panels fade in and out when a tab is clicked
• [ ] Validate that the active tab indicator animates when clicked

COM

• [ ] Navigate to the COM page
• [ ] Validate that the hero animates on load
• [ ] Scroll down to the tabbed component showing customer testimonials
• [ ] Validate that the panels fade in and out when a tab is clicked
• [ ] Validate that the active tab indicator animates when clicked

Terraform Overview

• [ ] Navigate to the Terraform overview page
• [ ] Scroll down to the customer testimonials sections (above the Cruise section)
• [ ] Validate that clicking the items in the quote slider animate the slides in horizontally

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 8c921574a9434062eb8e22493aa782c4730af309

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | ------------------------------ | ----- | | @hashicorp/react-motion-config | Minor | | @hashicorp/react-notification | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2023 6:50pm

[github-actions[bot]]

:package: Canary Packages Published

Latest commit: 8c921574a9434062eb8e22493aa782c4730af309

Published 2 packages

#### @hashicorp/react-motion-config@0.4.0-canary-20230927184943 ``` npm install @hashicorp/react-motion-config@canary ``` #### @hashicorp/react-notification@0.6.0-canary-20230927184943 ``` npm install @hashicorp/react-notification@canary ```

[nandereck]

@dstaley - mind taking a look at this PR? I think I have all my bases covered but would love for someone to poke holes in this. We paired on this awhile back but I put it down when higher priority work came up.

Beyond a general review, two specific things come to mind that I'd love feedback on:

• I seem to recall us deliberately not updating framer-motion to the latest for these components because of its usage in other repos maybe? I can't fully remember, so if anything comes to mind, please share!
• Do these validation steps look comprehensive or are there other things I should be checking?

[dstaley]

One other instance I know we're using framer-motion is in the notifications for the localized site redirects. You should be able to trigger them by setting your browser's language to Spanish/French/Japanese (such that console.log(navigator.languages) returns an array where the first element contains es/fr/ja). I think that one relied on layout animations, so it'd be a good test case to ensure this change works as expected.