Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RuizBox

Why Cant i animate this SVG with svg Draw

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,});

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×