Skip to main contentGatsby theme Carbon

GifPlayer

The <GifPlayer> 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
IBM Cloud Pictograms
Dark
IBM Cloud Platform Prototype

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
components/GifPlayer/GifPlayer.js
<Column colLg='4'>
<GifPlayer>
![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.gif) // must be gif
![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.png) // must be static image
</GifPlayer>
</Column>
Dark
components/GifPlayer/GifPlayer.js
<Column colLg='8'>
<GifPlayer color='dark'>
![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.gif) // must be gif
![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.png) //must be static image
</GifPlayer>
</Column>

Props

propertypropTyperequireddefaultdescription
childrennodeyesPass in the images that will be rendered. Only pass in the images, no other children
colorstringlightSpecify if the icon color should be light or dark
classNamestringSpecify an optional className to be applied to the container node