diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml
index 0995f5f96..d3c09c736 100644
--- a/packages/example/src/data/nav-items.yaml
+++ b/packages/example/src/data/nav-items.yaml
@@ -42,6 +42,8 @@
path: /components/DoDontRow
- title: FeatureCard
path: /components/FeatureCard
+ - title: GifPlayer
+ path: /components/GifPlayer
- title: Grid
path: /components/Grid
- title: ImageCard
diff --git a/packages/example/src/pages/components/GifPlayer.mdx b/packages/example/src/pages/components/GifPlayer.mdx
new file mode 100644
index 000000000..e27e27383
--- /dev/null
+++ b/packages/example/src/pages/components/GifPlayer.mdx
@@ -0,0 +1,83 @@
+---
+title: GifPlayer
+description: Usage instructions for the Accordion component
+---
+
+
+
+The `` component is used to pause and play images that are gif's. It works by replacing the gif with a static image on pause.
+
+
+
+## Example
+
+
+
+
+Light
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Dark
+
+
+
+
+
+
+
+
+
+
+## Code
+
+Place two images inside of the GifPlayer component. The first image will be used as the gif, the second image will be used as the static image on pause. Only provide two images inside the component, do not place any other children inside the component.
+
+Light
+
+```jsx path=components/GifPlayer/GifPlayer.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/GifPlayer
+
+
+
+
+ // must be gif
+ // must be static image
+
+
+
+
+```
+
+Dark
+
+```jsx path=components/GifPlayer/GifPlayer.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/GifPlayer
+
+
+
+
+ // must be gif
+ //must be static image
+
+
+
+
+```
+
+### Props
+
+| property | propType | required | default | description |
+| --------- | -------- | -------- | ------- | --------------------- |
+| children | node | yes | | Pass in the images that will be rendered. Only pass in the images, no other children |
+| color | string | | `light` | Specify if the icon color should be light or dark |
+| className | string | | | Specify an optional className to be applied to the container node |
diff --git a/packages/example/src/pages/components/ImageGallery.mdx b/packages/example/src/pages/components/ImageGallery.mdx
index f914cc44c..bc8b2cf85 100644
--- a/packages/example/src/pages/components/ImageGallery.mdx
+++ b/packages/example/src/pages/components/ImageGallery.mdx
@@ -48,12 +48,22 @@ Click on an image to open the gallery.
+
+
+
+
+
+
+
+
+
+
@@ -67,7 +77,7 @@ Click on an image to open the gallery.
-
+
diff --git a/packages/example/src/pages/components/images/IBM_Cloud_Pictograms.png b/packages/example/src/pages/components/images/IBM_Cloud_Pictograms.png
new file mode 100644
index 000000000..91ab18f94
Binary files /dev/null and b/packages/example/src/pages/components/images/IBM_Cloud_Pictograms.png differ
diff --git a/packages/example/src/pages/components/images/IBM_Cloud_Platform_Prototype.png b/packages/example/src/pages/components/images/IBM_Cloud_Platform_Prototype.png
new file mode 100644
index 000000000..ead0fc438
Binary files /dev/null and b/packages/example/src/pages/components/images/IBM_Cloud_Platform_Prototype.png differ
diff --git a/packages/gatsby-theme-carbon/index.js b/packages/gatsby-theme-carbon/index.js
index 094a9ffc6..2ed7abfa4 100644
--- a/packages/gatsby-theme-carbon/index.js
+++ b/packages/gatsby-theme-carbon/index.js
@@ -4,6 +4,7 @@ export { AnchorLinks, AnchorLink } from './src/components/AnchorLinks';
export { default as PageDescription } from './src/components/PageDescription';
export { default as Video } from './src/components/Video/Video';
export { default as DoDontExample } from './src/components/DoDontExample';
+export { default as GifPlayer } from './src/components/GifPlayer';
export { Row, Column, Grid } from './src/components/Grid';
export { default as Caption } from './src/components/Caption';
export { default as ResourceCard } from './src/components/ResourceCard';
diff --git a/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js b/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js
new file mode 100644
index 000000000..c236f1fba
--- /dev/null
+++ b/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+ PlayOutline24,
+ PlayOutlineFilled24,
+ PauseOutline24,
+ PauseOutlineFilled24,
+} from '@carbon/icons-react';
+import styles from './GifPlayer.module.scss';
+
+const Pause = ({ hovering }) =>
+ hovering ? : ;
+
+const Play = ({ hovering }) =>
+ hovering ? : ;
+
+const ToggleIcon = ({ paused, hovering }) =>
+ paused ? : ;
+
+const GifPlayer = ({ children, color, className, isInDialog }) => {
+ const [paused, setPaused] = useState(false);
+ const [hovering, setHovering] = useState(false);
+
+ const onClick = () => {
+ setPaused(!paused);
+ };
+
+ const controlsClassNames = classnames({
+ [styles.controls]: true,
+ [styles.dark]: color === 'dark',
+ });
+
+ const containerClassNames = classnames({
+ [styles.container]: true,
+ [className]: className,
+ [styles.gifInDialog]: isInDialog,
+ });
+
+ const staticImageClassNames = classnames({
+ [styles.imgHidden]: true,
+ [styles.imgDisplayed]: paused,
+ });
+
+ const gifClassNames = classnames({
+ [styles.gifDisplayed]: true,
+ [styles.gifHidden]: paused,
+ });
+
+ const childrenArray = React.Children.toArray(children);
+
+ const labelText = paused
+ ? 'Toggleable animation paused'
+ : 'Toggleable animation playing';
+
+ return (
+
+
+ {childrenArray[0]}
+
+
+ {childrenArray[1]}
+
+
+