Merge pull request #692 from primer/PrimerCSSAnimation

Primer CSS Animation

Author: Emily

docs/landing/PrimerCSSAnimation.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+import animation from './PrimerCSSAnimation.json'
+
+const ReactBodymovin = dynamic(() => import('react-bodymovin'), {
+  ssr: false
+})
+
+const bodymovinOptions = {
+  loop: true,
+  autoplay: true,
+  prerender: true,
+  animationData: animation
+}
+
+const PrimerCSSAnimation = props => <ReactBodymovin options={bodymovinOptions} {...props} />
+
+export default PrimerCSSAnimation

docs/landing/PrimerCSSAnimation.json

@@ -8,7 +8,7 @@ import ComponentsImage from './ComponentsImage.svg'
 import SpacingImage from './SpacingImage.svg'
 import ColorImage from './ColorImage.svg'
 
-export {default as HeaderImage} from './HeaderImage.svg'
+export {default as PrimerCSSAnimation} from './PrimerCSSAnimation.js'
 
 const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
 const OverviewText = props => <Text fontSize={1} {...props} />

docs/landing/index.js

@@ -136,5 +136,8 @@
     "unist-util-stringify-position": "^2.0.0",
     "unist-util-visit": "^1.4.0",
     "webpack": "4.20.2"
+  },
+  "dependencies": {
+    "react-bodymovin": "2.0.0"
   }
 }

package-lock.json

@@ -1,6 +1,6 @@
 import {Box, Flex, Heading, Link, Text} from '@primer/components'
 import {
-  HeaderImage,
+  PrimerCSSAnimation,
   MetaPackageBox,
   PrimerPackageBox,
   PrimitivesOverview,
@@ -20,7 +20,7 @@ export const Hero = () => (
         <Text is="div" color="blue.2" fontSize={2} mb={4}>
           v{version}
         </Text>
-        <Box is={HeaderImage} mb={6} />
+        <Box is={PrimerCSSAnimation} mb={6} />
       </Box>
     </Box>
   </Box>