Jump to content
GreenSock

RuizBox

Why Cant i animate this SVG with svg Draw

By RuizBox, in GSAP. Views: 1,200

Recommended Posts

Posted

When i click on inspect, it does show that something is happening, but no visual changes can be seen... 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Chameleon-Dev</title>
  <link rel="stylesheet" href="css/index.min.css">
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 355.16 372.37">
    <defs>
      <style>
        .a {
          fill: url("#a");
        }
        .b {
          fill: url("#b");
        }
        .c {
          fill: url("#c");
        }
        .d {
          fill: url("#d");
        }
        .e {
          fill: url("#e");
        }
        .f {
          fill: #00a086;
        }
        .g {
          fill: #0088bd;
        }
      </style>
      <linearGradient id="a" x1="627.86" y1="131.81" x2="801.37" y2="131.81" gradientUnits="userSpaceOnUse"><stop offset="0.11" stop-color="#00a3b8"/><stop offset="0.18" stop-color="#00a2a7"/><stop offset="0.28" stop-color="#00a195"/><stop offset="0.39" stop-color="#00a08a"/> <stop offset="0.51" stop-color="#00a086"/><stop offset="0.62" stop-color="#009e8b"/><stop offset="0.74" stop-color="#00979a"/><stop offset="0.88" stop-color="#008cb3"/><stop offset="0.93" stop-color="#0088bd"/></linearGradient>
      <linearGradient id="b" x1="639.38" y1="287.63" x2="768.84" y2="287.63" gradientUnits="userSpaceOnUse"><stop offset="0.33" stop-color="#00a086"/><stop offset="0.56" stop-color="#009f88"/><stop offset="0.69" stop-color="#009b91"/><stop offset="0.79" stop-color="#00959f"/><stop offset="0.89" stop-color="#008cb3"/><stop offset="0.93" stop-color="#0088bd"/></linearGradient>
      <linearGradient id="c" x1="639.38" y1="214.26" x2="795.23" y2="214.26" gradientUnits="userSpaceOnUse"><stop offset="0.21" stop-color="#0088bd"/><stop offset="0.32" stop-color="#008ab8"/><stop offset="0.46" stop-color="#0091a9"/><stop offset="0.62" stop-color="#009c90"/><stop offset="0.67" stop-color="#00a086"/></linearGradient>
      <linearGradient id="d" x1="635.64" y1="118.94" x2="635.64" y2="57.75" gradientUnits="userSpaceOnUse"><stop offset="0.31" stop-color="#00a086"/><stop offset="0.43" stop-color="#009a93"/><stop offset="0.75" stop-color="#008db2"/><stop offset="0.93" stop-color="#0088bd"/></linearGradient><linearGradient id="e" x1="707.47" y1="321.99" x2="707.47" y2="248.47" xlink:href="#d"/></defs>
    <title>lgo</title><path
      class="a"
      d="M790.12,172.61c-5.83-10.24-19.82-37.18-20.83-39.14-1.21-2.55-13.67-27.18-43-30C721.8,95.2,716.79,90,709.08,82c-2.94-3-6.26-6.49-10.17-10.73-3.61-3.93-15-12-27.06-18.07-16.9-8.56-29.39-10.49-37.13-5.73l-.92.57-.69.84c-2,2.37-4.22,6.36-5.25,15.05,4.31-6.92,11.62-6.51,15-5.86,3.18-.62,10.43.31,23.09,6.73,11.45,5.8,21.3,13,23.36,15.27,4,4.36,7.39,7.86,10.38,11,8.34,8.65,12.53,13,16.53,21.42l1.71,3.6,4,.11c24.93.71,35.19,22,35.61,22.88l.14.28c.64,1.23,15.66,30.2,21.55,40.42l.4.69.55.57c4.74,4.94,7.07,8.32,7.87,11.49,4.63,8,8.47,17.94,6.78,26.16l.55-.75.32-1.1c.77-2.64,1.6-5,2.41-7.27C802.65,196.71,804.39,187.75,790.12,172.61Z"
      transform="translate(-537.62 -44.94)"/><path
      class="b"
      d="M676.59,218.91l-1.55-.3-1.52.44c-10.66,3.13-21.64,16.9-24.79,23.73a100.38,100.38,0,0,0-9.17,47.54c1.19,18.72,8.37,35.07,20.74,47.31,14,13.81,29.52,19,44,19a65.27,65.27,0,0,0,31.62-8.4c24.25-13.6,37.24-39.88,31.59-63.9-6.44-27.38-30.71-39.76-50.74-39.76h-.48A45.2,45.2,0,0,0,696.85,249c17.57-2.61,34,5.22,43.65,16.41a37.25,37.25,0,0,1,14.37,21.95c4.33,18.41-6.07,38.8-25.29,49.59-20.57,11.54-43.05,8.35-60.14-8.54-21.78-21.52-20.17-55.77-8.91-80.16,2.2-4.77,9.88-13.65,15.38-16.22l.35.07a41.47,41.47,0,0,1,18.7-9.89C690.25,221.52,684.57,220.45,676.59,218.91Z"
      transform="translate(-537.62 -44.94)"/><path
      class="c"
      d="M788,192.51c1,3.79-.27,7.26-2.19,12.71-.7,2-1.49,4.2-2.24,6.66-4.92,5-20.62,6.23-35.83,7.4-6.82.52-13.87,1.06-21.11,1.95-15.51,1.89-21.22,2.44-31.71,1a41.47,41.47,0,0,0-18.7,9.89c24.91,4.79,28.9,4.86,52,2,6.95-.85,13.85-1.38,20.53-1.89,21.4-1.64,38.29-2.94,45.93-13.39l.13-.17C796.51,210.45,792.67,200.49,788,192.51Z"
      transform="translate(-537.62 -44.94)"/><path
      class="d"
      d="M643.85,111.2h0c-3.7-20.56-5.14-45.75-1.37-53l.4-.09c-3.41-.65-10.71-1.06-15,5.86a124.41,124.41,0,0,0,0,23.48c.93,12.45,2.8,23.54,3.18,25.71a6.51,6.51,0,0,0,13-.7A6.72,6.72,0,0,0,643.85,111.2Z"
      transform="translate(-537.62 -44.94)"/><path
      class="e"
      d="M732.87,285.62a6.5,6.5,0,0,0-6.48,6h0c-.27,7.64-3.48,13.08-9.27,15.74-6.71,3.07-15.72,1.74-21.92-3.24-6.68-5.36-9.15-14-6.95-24.24,3-13.8,13.5-22.13,28.21-22.28h.36a40.78,40.78,0,0,1,23.7,7.79c-9.64-11.19-26.08-19-43.65-16.41-10.86,5.3-18.54,15.15-21.33,28.18-3.24,15.11,1,28.63,11.52,37.1,10,8.06,24.3,10,35.47,4.91,10-4.57,16.05-14,16.79-26.07a6.46,6.46,0,0,0-6.43-7.47Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M555.54,390a9.94,9.94,0,0,1,3.4,1.49,2.6,2.6,0,0,1,1.28,2,1.6,1.6,0,0,1-.39,1,1.22,1.22,0,0,1-1,.47,1.62,1.62,0,0,1-.86-.21,4.25,4.25,0,0,1-.76-.63,5.22,5.22,0,0,0-1.31-1,8.75,8.75,0,0,0-2.07-.6,15.24,15.24,0,0,0-2.75-.24,9.84,9.84,0,0,0-5.26,1.47,10.39,10.39,0,0,0-3.74,4,11.46,11.46,0,0,0-1.36,5.55,12,12,0,0,0,1.31,5.65,9.8,9.8,0,0,0,8.95,5.39,11.59,11.59,0,0,0,3-.31,11.38,11.38,0,0,0,2.22-.89,11.22,11.22,0,0,0,1.26-.94,5,5,0,0,1,.73-.55,1.33,1.33,0,0,1,.68-.18,1.29,1.29,0,0,1,1,.39,1.44,1.44,0,0,1,.37,1,2.72,2.72,0,0,1-1.26,1.91,11,11,0,0,1-3.45,1.75,15.33,15.33,0,0,1-4.87.73,12.88,12.88,0,0,1-6.8-1.81,12.33,12.33,0,0,1-4.63-5,15.4,15.4,0,0,1-1.65-7.17,14.71,14.71,0,0,1,1.67-7A12.86,12.86,0,0,1,551,389.42,18.19,18.19,0,0,1,555.54,390Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M585.51,392.79a12,12,0,0,1,2.3,7.62v14.81a1.57,1.57,0,1,1-3.14,0V400.41a8.84,8.84,0,0,0-1.62-5.52,6,6,0,0,0-5.08-2.12,9,9,0,0,0-7.33,3.85,6.57,6.57,0,0,0-1.2,3.79v14.81a1.57,1.57,0,1,1-3.14,0V379.63a1.57,1.57,0,1,1,3.14,0V395a11,11,0,0,1,3.92-3.69,10.21,10.21,0,0,1,5.13-1.44Q583.2,389.84,585.51,392.79Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M618.87,390.52a1.62,1.62,0,0,1,.45,1.15v23.55a1.57,1.57,0,1,1-3.14,0v-3.51a11,11,0,0,1-3.93,4,10.62,10.62,0,0,1-5.7,1.62,11.26,11.26,0,0,1-6.31-1.83,12.57,12.57,0,0,1-4.4-5,15.79,15.79,0,0,1-1.6-7.17,15.45,15.45,0,0,1,1.62-7.14,12.43,12.43,0,0,1,4.42-4.95,11.69,11.69,0,0,1,12-.26,10,10,0,0,1,3.93,4v-3.25a1.61,1.61,0,0,1,.45-1.15,1.58,1.58,0,0,1,2.25,0Zm-7.12,22.43a9.75,9.75,0,0,0,3.4-4,12.86,12.86,0,0,0,1.23-5.68,12.46,12.46,0,0,0-1.23-5.55,9.79,9.79,0,0,0-3.4-4,8.66,8.66,0,0,0-4.89-1.44,8.78,8.78,0,0,0-4.89,1.41,9.63,9.63,0,0,0-3.4,3.9,12.51,12.51,0,0,0-1.23,5.63,13.07,13.07,0,0,0,1.2,5.68,9.56,9.56,0,0,0,3.38,4,9.13,9.13,0,0,0,9.84,0Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M664.82,392.74a12.28,12.28,0,0,1,2.22,7.67v14.81a1.57,1.57,0,1,1-3.14,0V400.57a9.05,9.05,0,0,0-1.65-5.63,6,6,0,0,0-5.1-2.17,8.72,8.72,0,0,0-4.16,1,8.61,8.61,0,0,0-3.17,2.85,6.89,6.89,0,0,0-1.2,3.9v14.65a1.57,1.57,0,1,1-3.14,0V400.41a9,9,0,0,0-1.57-5.52,5.72,5.72,0,0,0-4.92-2.12,8.32,8.32,0,0,0-4.06,1,8.68,8.68,0,0,0-3.09,2.8,6.67,6.67,0,0,0-1.18,3.79v14.81a1.57,1.57,0,1,1-3.14,0V391.77a1.57,1.57,0,1,1,3.14,0v3a11.37,11.37,0,0,1,3.82-3.56,9.88,9.88,0,0,1,5.08-1.41,9.22,9.22,0,0,1,5.23,1.47,8,8,0,0,1,3.14,4.29,9.69,9.69,0,0,1,4-4,11.54,11.54,0,0,1,5.91-1.73Q662.6,389.84,664.82,392.74Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M697.4,402.95a1.55,1.55,0,0,1-1.1.44H676.52A12.09,12.09,0,0,0,677.8,409a9.68,9.68,0,0,0,3.66,3.93,10.66,10.66,0,0,0,5.63,1.44,9.51,9.51,0,0,0,4.5-1,9.27,9.27,0,0,0,3.19-2.67,1.77,1.77,0,0,1,1.1-.47,1.43,1.43,0,0,1,1.36,1.36,1.55,1.55,0,0,1-.52,1.1,13.17,13.17,0,0,1-4.21,3.35,11.55,11.55,0,0,1-5.36,1.31,14.33,14.33,0,0,1-7.12-1.73,12.24,12.24,0,0,1-4.82-4.84,14.59,14.59,0,0,1-1.73-7.2,15.85,15.85,0,0,1,1.7-7.51,12.27,12.27,0,0,1,4.53-4.92,11.49,11.49,0,0,1,6-1.7,12.33,12.33,0,0,1,5.89,1.47,11.59,11.59,0,0,1,4.47,4.29,13,13,0,0,1,1.78,6.7A1.42,1.42,0,0,1,697.4,402.95Zm-17.3-8.4a9.7,9.7,0,0,0-3.32,6h17.85v-.42a8.28,8.28,0,0,0-1.57-4.11,8.53,8.53,0,0,0-3.27-2.67,9.5,9.5,0,0,0-4.06-.92A8.77,8.77,0,0,0,680.11,394.55Z"
      transform="translate(-537.62 -44.94)"/><path class="f" d="M707.37,416.35a1.57,1.57,0,0,1-2.7-1.13V379.63a1.57,1.57,0,1,1,3.14,0v35.59A1.53,1.53,0,0,1,707.37,416.35Z" transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M738,402.95a1.55,1.55,0,0,1-1.1.44H717.13a12.08,12.08,0,0,0,1.28,5.63,9.68,9.68,0,0,0,3.66,3.93,10.66,10.66,0,0,0,5.63,1.44,9.51,9.51,0,0,0,4.5-1,9.27,9.27,0,0,0,3.19-2.67,1.77,1.77,0,0,1,1.1-.47,1.44,1.44,0,0,1,1.36,1.36,1.55,1.55,0,0,1-.52,1.1,13.18,13.18,0,0,1-4.21,3.35,11.56,11.56,0,0,1-5.37,1.31,14.33,14.33,0,0,1-7.12-1.73,12.24,12.24,0,0,1-4.81-4.84,14.59,14.59,0,0,1-1.73-7.2,15.84,15.84,0,0,1,1.7-7.51,12.26,12.26,0,0,1,4.53-4.92,11.48,11.48,0,0,1,6-1.7,12.33,12.33,0,0,1,5.89,1.47,11.59,11.59,0,0,1,4.48,4.29,13,13,0,0,1,1.78,6.7A1.42,1.42,0,0,1,738,402.95Zm-17.3-8.4a9.7,9.7,0,0,0-3.32,6h17.85v-.42a8.26,8.26,0,0,0-1.57-4.11,8.53,8.53,0,0,0-3.27-2.67,9.5,9.5,0,0,0-4.06-.92A8.77,8.77,0,0,0,720.72,394.55Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M768,410.51a12.76,12.76,0,0,1-4.76,5,13.53,13.53,0,0,1-13.5,0,12.75,12.75,0,0,1-4.76-5,15.53,15.53,0,0,1,0-14.24,13,13,0,0,1,4.76-5,13.36,13.36,0,0,1,13.5,0,13,13,0,0,1,4.76,5,15.54,15.54,0,0,1,0,14.24Zm-2.72-12.77a10,10,0,0,0-3.64-4,9.61,9.61,0,0,0-5.16-1.44,9.48,9.48,0,0,0-5.13,1.44,10.2,10.2,0,0,0-3.64,4,12.52,12.52,0,0,0,0,11.25,10.19,10.19,0,0,0,3.64,4,9.47,9.47,0,0,0,5.13,1.44,9.75,9.75,0,0,0,8.79-5.34,12.86,12.86,0,0,0,0-11.31Z"
      transform="translate(-537.62 -44.94)"/><path
      class="f"
      d="M795.88,392.27a11.77,11.77,0,0,1,2.28,7.56v15.39a1.48,1.48,0,0,1-.47,1.13,1.55,1.55,0,0,1-1.1.44,1.52,1.52,0,0,1-1.57-1.57V400a8.55,8.55,0,0,0-1.7-5.52,6.34,6.34,0,0,0-5.26-2.12,9.39,9.39,0,0,0-7.54,3.85,6.38,6.38,0,0,0-1.26,3.79v15.23a1.57,1.57,0,1,1-3.14,0V391.77a1.57,1.57,0,1,1,3.14,0v2.88a11.11,11.11,0,0,1,4.06-3.74,10.9,10.9,0,0,1,5.42-1.49Q793.6,389.42,795.88,392.27Z"
      transform="translate(-537.62 -44.94)"/><path
      class="g"
      d="M830.55,379a3.12,3.12,0,0,1,.89,2.3V413.6a3.14,3.14,0,0,1-.89,2.28,3,3,0,0,1-2.25.92,3,3,0,0,1-2.22-.89,3.28,3.28,0,0,1-.92-2.25,11.35,11.35,0,0,1-8.22,3.66,12,12,0,0,1-6.54-1.86,13,13,0,0,1-4.63-5.16,16.09,16.09,0,0,1-1.7-7.48,16.45,16.45,0,0,1,1.67-7.51,12.87,12.87,0,0,1,4.58-5.18,11.66,11.66,0,0,1,6.41-1.86,12.14,12.14,0,0,1,4.71.92,12.37,12.37,0,0,1,3.72,2.33V381.25A3.14,3.14,0,0,1,826,379a3,3,0,0,1,2.25-.92A3.05,3.05,0,0,1,830.55,379Zm-7.27,30.12a9.23,9.23,0,0,0,2.15-6.25,9.34,9.34,0,0,0-2.15-6.28,7.32,7.32,0,0,0-11,0,10.28,10.28,0,0,0,0,12.54,6.91,6.91,0,0,0,5.52,2.49A7,7,0,0,0,823.28,409.07Z"
      transform="translate(-537.62 -44.94)"/><path
      class="g"
      d="M862.37,404.18a3.33,3.33,0,0,1-2.2.78H842.9a7.89,7.89,0,0,0,2.88,4.84,8,8,0,0,0,5.08,1.75,11.25,11.25,0,0,0,3.35-.39,8.7,8.7,0,0,0,1.91-.84l1-.6a4,4,0,0,1,1.78-.47,2.57,2.57,0,0,1,1.88.79,2.51,2.51,0,0,1,.79,1.83,3.27,3.27,0,0,1-1.46,2.56,12.5,12.5,0,0,1-3.93,2,16.23,16.23,0,0,1-12.64-1,12.79,12.79,0,0,1-5.05-5.05,14.73,14.73,0,0,1-1.78-7.25,16.05,16.05,0,0,1,1.88-7.9,13.38,13.38,0,0,1,5-5.21,12.85,12.85,0,0,1,6.59-1.81,12.22,12.22,0,0,1,6.52,1.88,14.09,14.09,0,0,1,4.89,5.08,13.65,13.65,0,0,1,1.83,6.91A2.69,2.69,0,0,1,862.37,404.18ZM843,399.73h13.71v-.37a5.41,5.41,0,0,0-2.15-3.77,6.79,6.79,0,0,0-4.4-1.57Q844.05,394,843,399.73Z"
      transform="translate(-537.62 -44.94)"/><path
      class="g"
      d="M891.94,389.65a2.69,2.69,0,0,1,.84,2,4.05,4.05,0,0,1-.42,1.57l-9.79,21.56a3.24,3.24,0,0,1-1.07,1.41,2.9,2.9,0,0,1-1.6.58l-.47.05a2.75,2.75,0,0,1-1.65-.55,3.61,3.61,0,0,1-1.18-1.49l-9.73-21.56a4.13,4.13,0,0,1-.37-1.67,2.61,2.61,0,0,1,.89-1.91,3,3,0,0,1,2.2-.86,3.39,3.39,0,0,1,1.83.52,3.24,3.24,0,0,1,1.26,1.47l7.22,16.54,7.17-16.49a3.45,3.45,0,0,1,1.15-1.52,2.47,2.47,0,0,1,1.62-.47A2.89,2.89,0,0,1,891.94,389.65Z"
      transform="translate(-537.62 -44.94)"/></svg>


  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/uncompressed/plugins/AttrPlugin.js"></script>
  <script type="text/javascript" src="js/uncompressed/jquery.gsap.js"></script>
  <script type="text/javascript" src="js/uncompressed/TimelineMax.js"></script>
  <script type="text/javascript" src="js/uncompressed/plugins/DrawSVGPlugin.js"></script>
  <script type="text/javascript" src="js/uncompressed/TweenMax.js"></script>
  <script type="text/javascript" src="js/animations.js"></script>
</body>

</html>

 

This is my Tween 

TweenMax.from(".a", 2, { drawSVG:0,});

 

Link to comment
Share on other sites
Posted
Quote

DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

 

I guess DrawSVGPlugin only draws stroke, I have reduced your demo to single path and added stroke to it, it works.

 

See the Pen XexjMo by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites
Posted

Hi @RuizBox :)

 

Welcome to the forum and thank you for joining Club GreenSock.

 

@Sahil is exactly right, drawSVG only works with strokes. The problem you'll encounter with your design is the gradients in the stroke of your logo. There are ways around this and we've had some discussions about animating gradients in strokes, but I think there's a much easier approach for you. If it were me, I'd add a mask over the top of the logo and use drawSVG to animate the mask and reveal the logo. Like this:

 

See the Pen XexgJM by PointC (@PointC) on CodePen

 

If you have additional questions, a CodePen demo is the best way to get answers as we can easily edit your code to find a solution for you. Here's some info about that.

Hopefully this helps with your project. Happy tweening and welcome aboard.

:)

  • Like 7
Link to comment
Share on other sites
Posted

You're most welcome. That's the GreenSock experience. ;)

 

Thank you for supporting GreenSock with your Club membership. Please let us know if you have additional GSAP questions.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites
Posted

Hello @RuizBox and welcome to the GreenSock forum!

 

Here is a link to the DrawSVG Docs so you have a reference on what is required to use DrawSVG ;)

 

https://greensock.com/docs/Plugins/DrawSVGPlugin

  • DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

Hopefully this helps! Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account