Merge pull request #54 from pluralsh/klink/no-mobile-anim

feat: Disable homepage animations on mobile devices

package.json

@@ -85,6 +85,7 @@
     "tslib": "2.6.0",
     "type-fest": "3.13.1",
     "url-join": "5.0.0",
+    "use-mobile-detect-hook": "1.0.5",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {

pages/index.tsx

@@ -27,6 +27,8 @@ import {
   useTransform,
 } from 'framer-motion'
 import styled, { useTheme } from 'styled-components'
+// @ts-expect-error
+import useMobileDetect from 'use-mobile-detect-hook'
 
 import { directusClient } from '@src/apollo-client'
 import { mqs } from '@src/breakpoints'
@@ -68,7 +70,7 @@ const HeroImagesSC = styled.div(({ theme: _theme }) => {
     transformStyle: 'preserve-3d',
     perspective: '1200px',
     transformOrigin: 'center',
-    transform: 'rotateY(-00deg) rotateX(0deg)  rotateZ(0deg)',
+    transform: 'rotateY(-00deg) rotateX(0deg) rotateZ(0deg)',
 
     position: 'relative',
     width: '100%',
@@ -146,26 +148,38 @@ const MotionDiv = styled(motion.div)(({ theme: _ }) => ({
   opacity: 0,
 }))
 
-const heroVariants = ({ delay = 0 }: { delay: number }): Variants => ({
-  offscreen: {
-    opacity: 0,
+const heroVariants = ({ delay = 0 }: { delay: number }): Variants => {
+  const start = {
     translateZ: 350,
-    // Need to set zero-length transition here to make sure
-    // state is set immediately on page load
-    transition: { type: 'linear', duration: 0 },
-  },
-  onscreen: {
+    opacity: 0,
+  }
+  const end = {
     translateZ: 0,
-    // scale: 1,
     opacity: 1,
-    transition: {
-      type: 'spring',
-      bounce: 0.15,
-      duration: 2.25,
-      delay,
+  }
+
+  return {
+    offscreen: {
+      ...start,
+      // Need to set zero-length transition here to make sure
+      // state is set immediately on page load
+      transition: { type: 'linear', duration: 0 },
     },
-  },
-})
+    onscreen: {
+      ...end,
+      transition: {
+        type: 'spring',
+        bounce: 0.15,
+        duration: 2.25,
+        delay,
+      },
+    },
+    mobile: {
+      ...end,
+      transition: { type: 'linear', duration: 0 },
+    },
+  }
+}
 
 function HeroIn({
   children,
@@ -181,6 +195,7 @@ function HeroIn({
     [0, 1],
     [`${20 * parallax}%`, `${-20 * parallax}%`]
   )
+  const isMobile = useMobileDetect().isMobile()
 
   return (
     <motion.div
@@ -189,7 +204,7 @@ function HeroIn({
     >
       <div className="endTransform">
         <MotionDiv
-          animate={inView ? 'onscreen' : 'offscreen'}
+          animate={isMobile ? 'mobile' : inView ? 'onscreen' : 'offscreen'}
           variants={variants}
         >
           {children}
@@ -380,7 +395,6 @@ export default function Index({
         position="50% 50%"
         size="cover"
         image="/images/gradients/gradient-bg-2.jpg"
-        className="[perspective:1000px]"
       >
         <HomePageHero
           heading={

src/components/layout/GradientBG.tsx

@@ -15,6 +15,11 @@ const GradientBGSC = styled.div<{
     $image: image = '/images/gradients/gradient-bg-1.jpg',
   }) => ({
     position: 'relative',
+    '.bg': {
+      // Make sure background doesn't intersect 3d objects in older Safari
+      transform: `translateZ(-1000px)`,
+      perspective: 'none',
+    },
     '.bg, .bg::after': {
       '--blur-amount': '0px',
       overflow: 'hidden',

src/components/page-sections/HomepageFeaturesSection.tsx

@@ -16,6 +16,8 @@ import { type PrefixKeys } from '@pluralsh/design-system/dist/utils/ts-utils'
 import classNames from 'classnames'
 import { type Variants, motion, useInView } from 'framer-motion'
 import styled from 'styled-components'
+// @ts-expect-error
+import useMobileDetect from 'use-mobile-detect-hook'
 
 import { breakpointIsGreaterOrEqual, mqs } from '@src/breakpoints'
 import { Columns, EqualColumn } from '@src/components/layout/Columns'
@@ -114,12 +116,12 @@ const MultiImageWrapSC = styled.div<ImgPropsSC & { $direction: 1 | -1 }>(
     height: $height,
     width: $width,
     position: 'absolute',
+    transformStyle: 'preserve-3d',
+    perspective: PERSPECTIVE,
     // Keep box shadow looking correct
     // when containing rounded images
     borderRadius: 10,
     boxShadow: mShadows.light.moderate,
-    transformStyle: 'preserve-3d',
-    perspective: PERSPECTIVE,
   })
 )
 
@@ -159,25 +161,35 @@ const cardVariants = ({
 }: {
   delay: number
   direction: 1 | -1
-}): Variants => ({
-  offscreen: {
-    rotateY: 15 * direction,
-    scale: 0.85,
-    opacity: 0,
-    transition: { type: 'linear', duration: 0 },
-  },
-  onscreen: {
+}): Variants => {
+  const end = {
     rotateY: 0,
     scale: 1,
     opacity: 1,
-    transition: {
-      type: 'spring',
-      bounce: 0.15,
-      duration: 1.8,
-      delay,
+  }
+
+  return {
+    offscreen: {
+      rotateY: 15 * direction,
+      scale: 0.85,
+      opacity: 0,
+      transition: { type: 'linear', duration: 0 },
     },
-  },
-})
+    onscreen: {
+      ...end,
+      transition: {
+        type: 'spring',
+        bounce: 0.15,
+        duration: 1.8,
+        delay,
+      },
+    },
+    mobile: {
+      ...end,
+      transition: { type: 'linear', duration: 0 },
+    },
+  }
+}
 
 const MotionDiv = styled(motion.div)(({ theme: _ }) => ({
   position: 'absolute',
@@ -208,9 +220,11 @@ function MultiImageImg({
     [animOffset, direction]
   )
 
+  const isMobile = useMobileDetect().isMobile()
+
   return (
     <MotionDiv
-      animate={inView ? 'onscreen' : 'offscreen'}
+      animate={isMobile ? 'mobile' : inView ? 'onscreen' : 'offscreen'}
       variants={variants}
       className="opacity-0"
     >

yarn.lock

@@ -11886,6 +11886,7 @@ __metadata:
     type-fest: 3.13.1
     typescript: 4.9.5
     url-join: 5.0.0
+    use-mobile-detect-hook: 1.0.5
     usehooks-ts: 2.9.1
   languageName: unknown
   linkType: soft
@@ -14684,6 +14685,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-mobile-detect-hook@npm:1.0.5":
+  version: 1.0.5
+  resolution: "use-mobile-detect-hook@npm:1.0.5"
+  peerDependencies:
+    react: ^16.7.0-alpha.0
+  checksum: 6d555cf47457231711c0fd386e8e51def0528c659cb659d3063c6cf6f4c97d900a8c7a03bba2051590ef0b694d4663b1407beee7f950cb9cc8f23d1d2688556e
+  languageName: node
+  linkType: hard
+
 "use-sync-external-store@npm:^1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"