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]

🦋 Changeset detected

Latest commit: 8c92157

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]

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]

📦 Canary Packages Published

Latest commit: 8c92157

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.