text: import React from "react";
  import anime from "animejs";
  
  import styles from "./SocialCardSlide.module.css";
  
  export default class SocialCardSlide extends React.Component {
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      const origPos = {
        [`${styles.profilePicture} ${styles.animated}`]: {
          x: "25%",
          y: "15%",
        },
        [`${styles.followButton} ${styles.animated}`]: {
          x: "-25%",
          y: "-10%",
        },
        [`${styles.username} ${styles.animated}`]: {
          x: "-20%",
          y: "-40%",
        },
        [`${styles.likes} ${styles.animated}`]: {
          x: "45%",
          y: "0%",
        },
        [`${styles.followers} ${styles.animated}`]: {
          x: "30%",
          y: "35%",
        },
      };
      let lastClass;
      let count = 0;
      let lastDuration;
      let stagger = anime.stagger(300, {
        start: 1500,
        easing: "easeOutQuad",
      });
  
      this.animeRef = anime({
        targets: `.${styles.animated}`,
        translateX: el => [origPos[el.getAttribute("class")].x, "0%"],
        translateY: el => [origPos[el.getAttribute("class")].y, "0%"],
        easing: "easeOutElastic(0.1, 0.5)",
        delay: (el, i, t) => {
          const currentClass = el.getAttribute("class");
          const prevClass = lastClass;
          lastClass = currentClass;
          if (currentClass !== prevClass) {
            lastDuration = stagger.apply(undefined, [
              el,
              count,
              Object.keys(origPos).length,
            ]);
            count += 1;
            return lastDuration;
          }
          return lastDuration;
        },
        duration: 1000,
      });
    }
  
    render() {
      return (
        <svg
          width="400"
          height="300"
          viewBox="-200 135 800 300"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={styles.svg}
        >
          <rect
            x="2.5"
            y="2.5"
            width="375"
            height="568"
            rx="33.5"
            fill="#F7F7F7"
            stroke="black"
            strokeWidth="5"
          />
          <mask
            id="mask0"
            mask-type="alpha"
            maskUnits="userSpaceOnUse"
            x="116"
            y="53"
            width="149"
            height="149"
          >
            <circle cx="190.5" cy="127.5" r="74.5" fill="#575757" />
            <circle cx="190.5" cy="127.5" r="74.5" stroke="white" />
          </mask>
          <g
            mask="url(#mask0)"
            className={`${styles.profilePicture} ${styles.animated}`}
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M242.084 185.201H139.373C145.754 162.852 166.331 146.49 190.728 146.49C215.126 146.49 235.703 162.852 242.084 185.201Z"
              fill="#C4C4C4"
            />
            <path
              d="M139.373 185.201H242.358V258.891H139.373V185.201Z"
              fill="#C4C4C4"
            />
          </g>
          <circle
            cx="190.5"
            cy="127.5"
            r="70"
            stroke="#C4C4C4"
            strokeWidth="9"
            className={`${styles.profilePicture} ${styles.animated}`}
          />
          <circle
            cx="190.865"
            cy="108.875"
            r="27.3897"
            fill="#C4C4C4"
            className={`${styles.profilePicture} ${styles.animated}`}
          />
          <rect
            className={`${styles.followButton} ${styles.animated}`}
            x="62"
            y="426"
            width="258"
            height="100"
            rx="18"
            fill="#54A3FF"
          />
          <path
            className={`${styles.followButton} ${styles.animated}`}
            d="M139.458 462.09V489H143.982V477.651H154.785V473.751H143.982V466.029H155.955V462.09H139.458ZM173.935 478.002C173.935 472.269 170.932 469.149 165.667 469.149C160.402 469.149 157.36 472.269 157.36 478.002V480.459C157.36 485.841 160.207 489.351 165.667 489.351C171.4 489.351 173.935 485.646 173.935 480.459V478.002ZM165.667 485.763C162.508 485.763 161.494 483.384 161.494 480.342V478.08C161.494 474.726 162.859 472.776 165.667 472.776C168.436 472.776 169.801 474.687 169.801 478.08V480.342C169.801 483.384 168.631 485.763 165.667 485.763ZM177.565 482.877C177.565 487.362 179.632 489 184.702 489V485.334C182.128 485.334 181.738 484.008 181.738 481.902V462.09H177.565V482.877ZM188.572 482.877C188.572 487.362 190.639 489 195.709 489V485.334C193.135 485.334 192.745 484.008 192.745 481.902V462.09H188.572V482.877ZM215.334 478.002C215.334 472.269 212.331 469.149 207.066 469.149C201.801 469.149 198.759 472.269 198.759 478.002V480.459C198.759 485.841 201.606 489.351 207.066 489.351C212.799 489.351 215.334 485.646 215.334 480.459V478.002ZM207.066 485.763C203.907 485.763 202.893 483.384 202.893 480.342V478.08C202.893 474.726 204.258 472.776 207.066 472.776C209.835 472.776 211.2 474.687 211.2 478.08V480.342C211.2 483.384 210.03 485.763 207.066 485.763ZM230.551 475.74L235.309 489H238.741L244.279 469.5H239.911L236.635 481.863L231.994 469.5H228.796L224.428 481.785L221.152 469.5H216.823L222.322 489H225.793L230.551 475.74Z"
            fill="white"
          />
          <path
            className={`${styles.username} ${styles.animated}`}
            d="M102.219 243.672H96.8849V244.428C95.9609 243.84 94.7429 243.462 93.1889 243.462C89.0729 243.462 86.1329 246.024 86.1329 251.4V253.584C86.1329 258.456 88.6949 261.564 93.1889 261.564C96.0449 261.564 97.7669 260.64 98.6909 258.834C99.8669 260.766 101.757 261.564 104.277 261.564C109.233 261.564 111.921 257.868 111.921 251.736C111.921 241.194 104.235 235.23 94.1969 235.23C84.9989 235.23 76.7249 241.32 76.7249 252.408C76.7249 263.832 85.2929 269.544 94.1969 269.544C99.8249 269.544 103.731 268.032 105.663 266.646L103.689 262.824C100.665 264.336 98.2289 265.008 94.4069 265.008C87.6029 265.008 82.0589 261.144 82.0589 252.408C82.0589 246.402 85.1249 239.766 94.1969 239.766C100.749 239.766 106.587 242.79 106.587 251.694C106.587 255.474 105.789 257.028 104.151 257.028C102.849 257.028 102.219 256.23 102.219 253.878V243.672ZM94.0709 257.028C92.2229 257.028 91.5089 255.852 91.5089 253.164V251.568C91.5089 249.3 92.2229 247.998 94.0709 247.998C96.0029 247.998 96.8849 248.88 96.8849 251.568V253.668C96.8849 255.978 96.1289 257.028 94.0709 257.028ZM132.981 243H127.647V255.348C127.647 258.246 126.471 259.758 123.993 259.758C121.767 259.758 120.591 258.624 120.591 255.306V243H115.215V256.104C115.215 262.278 118.701 264.378 122.943 264.378C125.715 264.378 126.849 263.664 127.731 262.236V264H132.981V243ZM152.779 246.108C151.141 243.42 148.285 242.622 144.841 242.622C139.591 242.622 136.735 245.1 136.735 249.09C136.735 253.332 139.927 255.18 144.295 255.894C146.941 256.314 147.865 256.734 147.865 258.036C147.865 259.128 146.731 259.758 144.883 259.758C142.279 259.758 141.229 259.086 140.389 257.952L136.273 260.892C138.079 263.328 140.683 264.378 144.967 264.378C150.385 264.378 153.199 261.9 153.199 257.868C153.199 253.71 150.595 251.736 145.429 250.938C143.203 250.602 142.069 250.14 142.069 248.88C142.069 247.662 143.329 247.242 144.715 247.242C146.983 247.242 147.907 247.83 148.831 248.922L152.779 246.108ZM169.069 258.036C168.271 259.17 167.557 259.842 165.331 259.842C162.349 259.842 161.425 257.742 161.383 254.844H173.353V252.45C173.353 246.066 170.623 242.622 164.701 242.622C159.241 242.622 156.049 245.688 156.049 252.03V254.886C156.049 260.304 159.073 264.378 165.373 264.378C169.153 264.378 171.589 263.37 173.059 260.808L169.069 258.036ZM164.743 247.158C166.759 247.158 167.851 248.292 167.977 251.022H161.383C161.593 248.628 162.601 247.158 164.743 247.158ZM192.729 245.898C191.469 243.714 189.579 242.622 187.059 242.622C184.581 242.622 183.195 243.714 182.481 244.764V243H177.231V264H182.607V251.652C182.607 248.712 183.951 247.242 185.967 247.242C187.311 247.242 188.067 248.04 188.613 248.838L192.729 245.898ZM194.457 264H199.833V251.652C199.833 248.88 201.051 247.242 203.529 247.242C205.713 247.242 206.889 248.418 206.889 251.694V264H212.223V250.854C212.223 244.638 208.779 242.622 204.537 242.622C202.185 242.622 200.505 243.714 199.707 244.764V243H194.457V264ZM215.515 257.784C215.515 262.068 218.539 264.378 222.907 264.378C225.343 264.378 226.603 263.58 227.443 262.152V264H232.693V250.224C232.693 244.218 229.627 242.622 224.209 242.622C219.883 242.622 217.531 243.546 215.977 246.108L219.757 248.754C220.639 247.368 221.647 247.074 223.705 247.074C226.729 247.074 227.443 247.83 227.443 250.182V251.4H223.285C218.875 251.4 215.515 253.332 215.515 257.784ZM227.443 256.146C227.443 259.002 226.267 260.052 223.831 260.052C221.983 260.052 220.765 259.296 220.765 257.7C220.765 256.062 221.731 255.348 223.915 255.348H227.443V256.146ZM254.211 251.652C254.211 248.67 255.555 247.242 257.487 247.242C259.629 247.242 260.721 248.544 260.721 251.694V264H266.097V250.854C266.097 245.394 263.409 242.622 258.831 242.622C256.185 242.622 254.127 243.798 252.783 245.436C251.481 243.588 249.423 242.622 246.903 242.622C244.551 242.622 243.039 243.672 242.241 244.764V243H236.991V264H242.367V251.652C242.367 248.67 243.753 247.242 245.685 247.242C247.575 247.242 248.877 248.334 248.877 251.694V264H254.211V251.652ZM282.641 258.036C281.843 259.17 281.129 259.842 278.903 259.842C275.921 259.842 274.997 257.742 274.955 254.844H286.925V252.45C286.925 246.066 284.195 242.622 278.273 242.622C272.813 242.622 269.621 245.688 269.621 252.03V254.886C269.621 260.304 272.645 264.378 278.945 264.378C282.725 264.378 285.161 263.37 286.631 260.808L282.641 258.036ZM278.315 247.158C280.331 247.158 281.423 248.292 281.549 251.022H274.955C275.165 248.628 276.173 247.158 278.315 247.158Z"
            fill="black"
          />
          <path
            className={`${styles.likes} ${styles.animated}`}
            d="M85.5766 327.565H87.9416C93.0016 327.565 95.6416 330.26 95.6416 334.77C95.6416 338.4 92.8916 341.15 89.3166 341.15C84.8066 341.15 82.7166 338.565 82.2216 335.485H77.6016C77.9866 341.205 82.0566 345.44 89.3166 345.44C96.0266 345.44 100.372 340.49 100.372 334.66C100.372 329.82 97.8416 326.795 94.1566 325.31C97.6216 323.66 99.8216 320.58 99.8216 316.675C99.8216 310.845 95.2566 306.61 88.9316 306.61C83.2666 306.61 78.0966 310.295 78.0966 316.29H82.7166C82.8266 313.21 85.3566 310.845 88.9316 310.845C92.6716 310.845 95.0916 313.595 95.0916 316.565C95.0916 320.69 92.9466 323.275 87.9416 323.275H85.5766V327.565ZM113.077 327.565H115.442C120.502 327.565 123.142 330.26 123.142 334.77C123.142 338.4 120.392 341.15 116.817 341.15C112.307 341.15 110.217 338.565 109.722 335.485H105.102C105.487 341.205 109.557 345.44 116.817 345.44C123.527 345.44 127.872 340.49 127.872 334.66C127.872 329.82 125.342 326.795 121.657 325.31C125.122 323.66 127.322 320.58 127.322 316.675C127.322 310.845 122.757 306.61 116.432 306.61C110.767 306.61 105.597 310.295 105.597 316.29H110.217C110.327 313.21 112.857 310.845 116.432 310.845C120.172 310.845 122.592 313.595 122.592 316.565C122.592 320.69 120.447 323.275 115.442 323.275H113.077V327.565ZM154.987 317.555C154.987 310.57 149.817 306.61 144.097 306.61C138.377 306.61 133.207 310.57 133.207 317.61V334.44C133.207 341.48 138.377 345.44 144.097 345.44C149.817 345.44 154.987 341.48 154.987 334.495V317.555ZM150.257 317.555V334.495C150.257 338.565 147.507 341.15 144.097 341.15C140.632 341.15 137.882 338.565 137.882 334.495V317.555C137.882 313.485 140.632 310.9 144.097 310.9C147.507 310.9 150.257 313.485 150.257 317.555Z"
            fill="black"
          />
          <path
            className={`${styles.likes} ${styles.animated}`}
            d="M89.279 378.067C89.279 381.291 90.488 382.841 94.394 382.841V380.547C91.852 380.547 91.759 379.121 91.759 377.447V361.451H89.279V378.067ZM98.2509 382.841H100.731V367.341H98.2509V382.841ZM98.0959 364.241H100.886V361.451H98.0959V364.241ZM113.975 367.341L107.713 373.665V361.451H105.233V382.841H107.713V377.106L108.674 376.083L114.936 382.841H118.16L110.503 374.192L117.199 367.341H113.975ZM128.763 379.121C128.112 380.268 127.089 380.857 125.074 380.857C122.377 380.857 121.106 378.749 121.106 376.083V375.649H130.902V374.037C130.902 369.604 128.856 367.093 124.764 367.093C120.703 367.093 118.626 369.635 118.626 374.037V376.083C118.626 380.392 121.106 383.089 125.26 383.089C127.957 383.089 129.6 382.376 130.685 380.485L128.763 379.121ZM124.764 369.325C127.12 369.325 128.267 370.875 128.391 373.479H121.106C121.261 370.906 122.377 369.325 124.764 369.325ZM145.109 369.666C143.9 367.744 141.978 367.093 139.467 367.093C135.778 367.093 133.918 368.922 133.918 371.495C133.918 374.874 136.491 375.928 139.095 376.114C142.102 376.331 143.094 376.92 143.094 378.594C143.094 379.989 141.854 380.795 139.777 380.795C137.545 380.795 136.429 380.33 135.592 379.214L133.763 380.516C134.941 382.128 136.584 383.089 139.746 383.089C143.745 383.089 145.574 381.229 145.574 378.532C145.574 374.967 142.908 374.13 139.994 373.913C137.948 373.758 136.398 373.231 136.398 371.464C136.398 370.1 137.576 369.387 139.405 369.387C141.544 369.387 142.412 369.883 143.249 370.968L145.109 369.666Z"
            fill="black"
          />
          <path
            className={`${styles.followers} ${styles.animated}`}
            d="M246.522 307.05H241.242L233.432 325.53C232.222 328.335 230.847 331.69 230.847 334.33C230.847 340.93 235.412 345.44 241.792 345.44C248.282 345.44 252.737 340.82 252.737 334.11C252.737 327.785 248.832 323 242.782 323C241.737 323 240.197 323.165 239.207 323.77L246.522 307.05ZM235.577 334.11C235.577 329.875 238.052 327.07 241.792 327.07C245.477 327.07 248.007 329.875 248.007 334.11C248.007 338.4 245.477 341.15 241.792 341.15C238.052 341.15 235.577 338.4 235.577 334.11ZM280.237 317.555C280.237 310.57 275.067 306.61 269.347 306.61C263.627 306.61 258.457 310.57 258.457 317.61V334.44C258.457 341.48 263.627 345.44 269.347 345.44C275.067 345.44 280.237 341.48 280.237 334.495V317.555ZM275.507 317.555V334.495C275.507 338.565 272.757 341.15 269.347 341.15C265.882 341.15 263.132 338.565 263.132 334.495V317.555C263.132 313.485 265.882 310.9 269.347 310.9C272.757 310.9 275.507 313.485 275.507 317.555Z"
            fill="black"
          />
          <path
            className={`${styles.followers} ${styles.animated}`}
            d="M196.475 367.341V369.573H198.459V382.841H200.939V369.573H203.884V367.341H200.939V366.845C200.939 364.706 201.187 363.807 203.264 363.807H203.884V361.451H203.171C199.513 361.451 198.459 363.001 198.459 366.225V367.341H196.475ZM218.8 374.037C218.8 369.604 216.444 367.093 212.352 367.093C208.291 367.093 205.904 369.635 205.904 374.037V376.083C205.904 380.361 208.229 383.089 212.352 383.089C216.816 383.089 218.8 380.113 218.8 376.083V374.037ZM212.352 380.857C209.5 380.857 208.384 378.749 208.384 376.083V374.037C208.384 371.123 209.81 369.325 212.352 369.325C214.894 369.325 216.32 371.092 216.32 374.037V376.083C216.32 378.718 214.987 380.857 212.352 380.857ZM222.058 378.067C222.058 381.291 223.267 382.841 227.173 382.841V380.547C224.631 380.547 224.538 379.121 224.538 377.447V361.451H222.058V378.067ZM230.565 378.067C230.565 381.291 231.774 382.841 235.68 382.841V380.547C233.138 380.547 233.045 379.121 233.045 377.447V361.451H230.565V378.067ZM251.193 374.037C251.193 369.604 248.837 367.093 244.745 367.093C240.684 367.093 238.297 369.635 238.297 374.037V376.083C238.297 380.361 240.622 383.089 244.745 383.089C249.209 383.089 251.193 380.113 251.193 376.083V374.037ZM244.745 380.857C241.893 380.857 240.777 378.749 240.777 376.083V374.037C240.777 371.123 242.203 369.325 244.745 369.325C247.287 369.325 248.713 371.092 248.713 374.037V376.083C248.713 378.718 247.38 380.857 244.745 380.857ZM263.533 371.247L267.656 382.841H269.826L274.321 367.341H271.686L268.586 378.315L264.463 367.341H262.386L258.48 378.222L255.38 367.341H252.745L257.24 382.841H259.41L263.533 371.247ZM286.003 379.121C285.352 380.268 284.329 380.857 282.314 380.857C279.617 380.857 278.346 378.749 278.346 376.083V375.649H288.142V374.037C288.142 369.604 286.096 367.093 282.004 367.093C277.943 367.093 275.866 369.635 275.866 374.037V376.083C275.866 380.392 278.346 383.089 282.5 383.089C285.197 383.089 286.84 382.376 287.925 380.485L286.003 379.121ZM282.004 369.325C284.36 369.325 285.507 370.875 285.631 373.479H278.346C278.501 370.906 279.617 369.325 282.004 369.325ZM302.287 369.201C301.295 367.806 299.962 367.093 297.854 367.093C295.963 367.093 294.909 367.775 294.258 368.86V367.341H291.778V382.841H294.258V373.138C294.258 370.813 295.684 369.387 297.575 369.387C298.722 369.387 299.528 369.79 300.179 370.689L302.287 369.201ZM314.549 369.666C313.34 367.744 311.418 367.093 308.907 367.093C305.218 367.093 303.358 368.922 303.358 371.495C303.358 374.874 305.931 375.928 308.535 376.114C311.542 376.331 312.534 376.92 312.534 378.594C312.534 379.989 311.294 380.795 309.217 380.795C306.985 380.795 305.869 380.33 305.032 379.214L303.203 380.516C304.381 382.128 306.024 383.089 309.186 383.089C313.185 383.089 315.014 381.229 315.014 378.532C315.014 374.967 312.348 374.13 309.434 373.913C307.388 373.758 305.838 373.231 305.838 371.464C305.838 370.1 307.016 369.387 308.845 369.387C310.984 369.387 311.852 369.883 312.689 370.968L314.549 369.666Z"
            fill="black"
          />
        </svg>
      );
    }
  }
  