Share Posted October 15, 2017 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 More sharing options...
Share Posted October 15, 2017 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 3 Link to comment Share on other sites More sharing options...
Share Posted October 15, 2017 Yup looks like you will have to recreate your SVG as path with strokes. See the Pen KXGgMZ?editors=1010 by Sahil89 (@Sahil89) on CodePen 2 Link to comment Share on other sites More sharing options...
Share Posted October 15, 2017 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. 7 Link to comment Share on other sites More sharing options...
Author Share Posted October 15, 2017 @PointC @Sahil Thank you so much! you really helped me out with this 4 Link to comment Share on other sites More sharing options...
Share Posted October 15, 2017 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. 4 Link to comment Share on other sites More sharing options...
Share Posted October 18, 2017 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now