Jump to content
Search Community

Why Cant i animate this SVG with svg Draw

RuizBox test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...