react-useanimations 2.0.8 → 2.0.9-RC

package/src/stories/controlled.stories.tsx

@@ -0,0 +1,257 @@
+import React, { useState } from 'react';
+import { withInfo } from '@storybook/addon-info';
+import radioButton from '../lib/radioButton';
+import star from '../lib/star';
+import UseAnimation from '..';
+
+// ANIMATIONS WITH CLICK PLAY & BACKWARDS WILL HAVE REVERSE FUNCITONALITY FOR STATE MNG
+export default {
+  title: 'Controlled State',
+  component: UseAnimation,
+  decorators: [withInfo],
+};
+
+export const RadioButton = () => {
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      <div style={{ padding: '20px' }}>
+        <span>radioButton</span>
+        <UseAnimation
+          reverse={checked}
+          onClick={() => {
+            setChecked(!checked);
+          }}
+          size={40}
+          wrapperStyle={{ marginTop: '5px' }}
+          animation={radioButton}
+        />
+      </div>
+    </div>
+  );
+};
+
+RadioButton.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const RadioButton = () => {
+        const [checked, setChecked] = useState(true);
+      
+        return (
+          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+            <div style={{ padding: '20px' }}>
+              <span>radioButton</span>
+              <UseAnimation
+                reverse={checked}
+                onClick={() => {
+                  setChecked(!checked);
+                }}
+                size={40}
+                wrapperStyle={{ marginTop: '5px' }}
+                animation={radioButton}
+              />
+            </div>
+          </div>
+        );
+      };
+      ~~~
+    `,
+    },
+  },
+};
+
+export const ChangingStrokeColor = () => {
+  const [strokeColor, setStrokeColor] = useState('black');
+
+  const handleButtonOnClick = () =>
+    strokeColor === 'black' ? setStrokeColor('red') : setStrokeColor('black');
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
+      <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
+        Change Stroke Color
+      </button>
+      <div style={{ padding: '20px' }}>
+        <span>star</span>
+        <UseAnimation
+          pathCss="fill: pink"
+          strokeColor={strokeColor}
+          size={40}
+          wrapperStyle={{ marginTop: '5px' }}
+          animation={star}
+        />
+      </div>
+    </div>
+  );
+};
+
+ChangingStrokeColor.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const ChangingStrokeColor = () => {
+        const [strokeColor, setStrokeColor] = useState('black');
+      
+        const handleButtonOnClick = () =>
+          strokeColor === 'black' ? setStrokeColor('red') : setStrokeColor('black');
+      
+        return (
+          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
+            <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
+              Change Stroke Color
+            </button>
+            <div style={{ padding: '20px' }}>
+              <span>star</span>
+              <UseAnimation
+                strokeColor={strokeColor}
+                size={40}
+                wrapperStyle={{ marginTop: '5px' }}
+                animation={star}
+              />
+            </div>
+          </div>
+        );
+      };
+      ~~~
+    `,
+    },
+  },
+};
+
+export const ChangingFillColor = () => {
+  const [fillColor, setFillColor] = useState('black');
+
+  const handleButtonOnClick = () =>
+    fillColor === 'black' ? setFillColor('red') : setFillColor('black');
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
+      <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
+        Change Fill Color
+      </button>
+      <div style={{ padding: '20px' }}>
+        <span>star</span>
+        <UseAnimation
+          fillColor={fillColor}
+          size={40}
+          wrapperStyle={{ marginTop: '5px' }}
+          animation={star}
+        />
+      </div>
+    </div>
+  );
+};
+
+ChangingFillColor.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const ChangingFillColor = () => {
+        const [fillColor, setFillColor] = useState('black');
+      
+        const handleButtonOnClick = () =>
+          fillColor === 'black' ? setFillColor('red') : setFillColor('black');
+      
+        return (
+          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
+            <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
+              Change Fill Color
+            </button>
+            <div style={{ padding: '20px' }}>
+              <span>star</span>
+              <UseAnimation
+                fillColor={fillColor}
+                size={40}
+                wrapperStyle={{ marginTop: '5px' }}
+                animation={star}
+              />
+            </div>
+          </div>
+        );
+      };
+      ~~~
+    `,
+    },
+  },
+};
+
+export const ChangingPathCss = () => {
+  const defaultCssPath = 'fill: red; stroke: blue;';
+  const [pathCss, setPathCss] = useState(defaultCssPath);
+
+  const handleButtonOnClick = () =>
+    pathCss === defaultCssPath
+      ? setPathCss('fill: blue; stroke: red;')
+      : setPathCss(defaultCssPath);
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
+          Change Path Css
+        </button>
+        <span style={{ marginLeft: '20px' }}>
+          After changing, click the star back & forth to see the fill & stroke change taking an
+          effect
+        </span>
+      </div>
+      <div style={{ padding: '20px' }}>
+        <span>star</span>
+        <UseAnimation
+          pathCss={pathCss}
+          size={40}
+          wrapperStyle={{ marginTop: '5px' }}
+          animation={star}
+        />
+      </div>
+    </div>
+  );
+};
+
+ChangingPathCss.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const ChangingPathCss = () => {
+        const defaultCssPath = 'fill: red; stroke: blue;';
+        const [pathCss, setPathCss] = useState(defaultCssPath);
+      
+        const handleButtonOnClick = () =>
+          pathCss === defaultCssPath
+            ? setPathCss('fill: blue; stroke: red;')
+            : setPathCss(defaultCssPath);
+      
+        return (
+          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
+                Change Path Css
+              </button>
+              <span style={{ marginLeft: '20px' }}>
+                After changing, click the star back & forth to see the fill & stroke change taking an
+                effect
+              </span>
+            </div>
+            <div style={{ padding: '20px' }}>
+              <span>star</span>
+              <UseAnimation
+                pathCss={pathCss}
+                size={40}
+                wrapperStyle={{ marginTop: '5px' }}
+                animation={star}
+              />
+            </div>
+          </div>
+        );
+      };
+      ~~~
+    `,
+    },
+  },
+};

package/src/stories/generated.stories.tsx

@@ -0,0 +1,406 @@
+import React from 'react';
+import activity from '../lib/activity';
+import airplay from '../lib/airplay';
+import alertCircle from '../lib/alertCircle';
+import alertOctagon from '../lib/alertOctagon';
+import alertTriangle from '../lib/alertTriangle';
+import archive from '../lib/archive';
+import arrowDown from '../lib/arrowDown';
+import arrowDownCircle from '../lib/arrowDownCircle';
+import arrowLeftCircle from '../lib/arrowLeftCircle';
+import arrowRightCircle from '../lib/arrowRightCircle';
+import arrowUp from '../lib/arrowUp';
+import arrowUpCircle from '../lib/arrowUpCircle';
+import behance from '../lib/behance';
+import bookmark from '../lib/bookmark';
+import calendar from '../lib/calendar';
+import checkBox from '../lib/checkBox';
+import checkmark from '../lib/checkmark';
+import codepen from '../lib/codepen';
+import copy from '../lib/copy';
+import download from '../lib/download';
+import dribbble from '../lib/dribbble';
+import edit from '../lib/edit';
+import error from '../lib/error';
+import explore from '../lib/explore';
+import facebook from '../lib/facebook';
+import folder from '../lib/folder';
+import github from '../lib/github';
+import heart from '../lib/heart';
+import help from '../lib/help';
+import home from '../lib/home';
+import infinity from '../lib/infinity';
+import info from '../lib/info';
+import instagram from '../lib/instagram';
+import linkedin from '../lib/linkedin';
+import loading from '../lib/loading';
+import loading2 from '../lib/loading2';
+import loading3 from '../lib/loading3';
+import lock from '../lib/lock';
+import mail from '../lib/mail';
+import maximizeMinimize from '../lib/maximizeMinimize';
+import maximizeMinimize2 from '../lib/maximizeMinimize2';
+import menu from '../lib/menu';
+import menu2 from '../lib/menu2';
+import menu3 from '../lib/menu3';
+import menu4 from '../lib/menu4';
+import microphone from '../lib/microphone';
+import microphone2 from '../lib/microphone2';
+import notification from '../lib/notification';
+import notification2 from '../lib/notification2';
+import playPause from '../lib/playPause';
+import playPauseCircle from '../lib/playPauseCircle';
+import plusToX from '../lib/plusToX';
+import pocket from '../lib/pocket';
+import radioButton from '../lib/radioButton';
+import scrollDown from '../lib/scrollDown';
+import searchToX from '../lib/searchToX';
+import settings from '../lib/settings';
+import settings2 from '../lib/settings2';
+import share from '../lib/share';
+import skipBack from '../lib/skipBack';
+import skipForward from '../lib/skipForward';
+import star from '../lib/star';
+import thumbUp from '../lib/thumbUp';
+import toggle from '../lib/toggle';
+import trash from '../lib/trash';
+import trash2 from '../lib/trash2';
+import twitter from '../lib/twitter';
+import userMinus from '../lib/userMinus';
+import userPlus from '../lib/userPlus';
+import userX from '../lib/userX';
+import video from '../lib/video';
+import video2 from '../lib/video2';
+import visibility from '../lib/visibility';
+import visibility2 from '../lib/visibility2';
+import volume from '../lib/volume';
+import youtube from '../lib/youtube';
+import youtube2 from '../lib/youtube2';
+import zoomIn from '../lib/zoomIn';
+import zoomOut from '../lib/zoomOut';
+import UseAnimation from '..';
+
+export default {
+  title: 'Animations',
+  component: UseAnimation,
+};
+export const All = () => (
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+    <div style={{ padding: '20px' }}>
+      <span>activity</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={activity} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>airplay</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={airplay} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>alertCircle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={alertCircle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>alertOctagon</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={alertOctagon} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>alertTriangle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={alertTriangle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>archive</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={archive} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>arrowDown</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={arrowDown} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>arrowDownCircle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={arrowDownCircle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>arrowLeftCircle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={arrowLeftCircle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>arrowRightCircle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={arrowRightCircle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>arrowUp</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={arrowUp} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>arrowUpCircle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={arrowUpCircle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>behance</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={behance} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>bookmark</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={bookmark} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>calendar</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={calendar} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>checkBox</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={checkBox} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>checkmark</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={checkmark} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>codepen</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={codepen} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>copy</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={copy} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>download</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={download} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>dribbble</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={dribbble} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>edit</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={edit} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>error</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={error} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>explore</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={explore} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>facebook</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={facebook} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>folder</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={folder} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>github</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={github} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>heart</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={heart} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>help</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={help} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>home</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={home} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>infinity</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={infinity} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>info</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={info} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>instagram</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={instagram} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>linkedin</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={linkedin} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>loading</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={loading} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>loading2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={loading2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>loading3</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={loading3} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>lock</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={lock} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>mail</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={mail} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>maximizeMinimize</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={maximizeMinimize} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>maximizeMinimize2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={maximizeMinimize2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>menu</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={menu} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>menu2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={menu2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>menu3</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={menu3} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>menu4</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={menu4} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>microphone</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={microphone} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>microphone2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={microphone2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>notification</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={notification} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>notification2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={notification2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>playPause</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={playPause} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>playPauseCircle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={playPauseCircle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>plusToX</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={plusToX} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>pocket</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={pocket} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>radioButton</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={radioButton} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>scrollDown</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={scrollDown} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>searchToX</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={searchToX} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>settings</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={settings} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>settings2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={settings2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>share</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={share} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>skipBack</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={skipBack} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>skipForward</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={skipForward} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>star</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={star} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>thumbUp</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={thumbUp} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>toggle</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={toggle} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>trash</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={trash} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>trash2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={trash2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>twitter</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={twitter} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>userMinus</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={userMinus} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>userPlus</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={userPlus} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>userX</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={userX} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>video</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={video} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>video2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={video2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>visibility</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={visibility} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>visibility2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={visibility2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>volume</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={volume} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>youtube</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={youtube} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>youtube2</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={youtube2} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>zoomIn</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={zoomIn} />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>zoomOut</span>
+      <UseAnimation size={40} wrapperStyle={{ marginTop: '5px' }} animation={zoomOut} />
+    </div>
+  </div>
+);