Search the Community

Hi All I've created a drawSVG but when comparing it to a vivus.js version, they start from different points, how can I control the starting points on my GSAP version? Any help appreciated

Is it possible to stack an img on top of an animating drawSVG? Just looking for a simple yes or no at the moment. I've got something working so far…

I have this pen working and have added the code to WordPress. The SVG is appearing but not drawing. Sorry, I don't have a live example worked up yet. I've added all the code where it needs to go. There is an existing GSAP animation so I plugged in the JS in the same file, the CSS in the stylesheet, and the drawSVG plugin link where the Tweenmax link is. I've also added the CSSPlugin link, and am not sure if that is needed. I'm using the <path> element only. The SVG image code is placed in a WordPress text widget running the newest version of WP. Funny that the image will show on the front-end but when I navigate back to the text widget the SVG code does not remain in the text widget. When I inspect for the SVG, it's code is in the html, yet there is not JS error in the console. What could I be missing? Are there any known issues with WordPress and drawSVG?

I have created a basic drawsvg animation where the content of the circle fills with a colour. I will have multiple circles on a page so I want the animation to loop through each item which I have achieved with the staggerFromTo. The next step is to feed in dynamic values for the drawsvg animation which I was hoping to pull from data-percent="x" as the values will be output on the page. I have done this but I am not sure on the best way to loop through this data...as at the moment it only pulls in the last data att value rather than the unique value for each circle. I hope my intention is clear. Any help would be appreciated

Hi. First of all, I'd like to say I'm sorry cause I'm really new in tweening. I've made an example of what I'm trying to do. I need to animate that circle making each stroke to go from 0 to 100, one after other, clockwise. Each one will have a different color. The way I tryied, It did't work at all. The stroke animate, and then back to point zero. I need something more like animating fill.

Hi there, I just started using Greensock and I wanted to directly add them into my wordpress site. But I'm facing with a rather confusing issue. I have a simple DrawSVG code that needs to be rendered in a page which works perfectly with a plain HTML file and javascript HTML: <svg id="Rays" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"> <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about=""/> </rdf:RDF> </x:xmpmeta> <?xpacket end="w"?></metadata> <defs> <style> .cls-1 { fill: none; stroke: #fff; stroke-width: 3.79px; fill-rule: evenodd; filter: url(#filter); } </style> <filter id="filter" x="493" y="-6" width="964" height="683" filterUnits="userSpaceOnUse"> <feGaussianBlur result="blur" stdDeviation="3" in="SourceAlpha"/> <feComposite result="composite"/> <feComposite result="composite-2"/> <feComposite result="composite-3"/> <feFlood result="flood" flood-color="#ffb64d" flood-opacity="0.35"/> <feComposite result="composite-4" operator="in" in2="composite-3"/> <feBlend result="blend" mode="screen" in2="SourceGraphic"/> <feBlend result="blend-2" in="SourceGraphic"/> <feFlood result="flood-2" flood-color="#ffba60"/> <feComposite result="composite-5" operator="in" in2="SourceGraphic"/> <feBlend result="blend-3" in2="blend-2"/> </filter> </defs> <g style="fill: none; filter: url(#filter)"> <path id="path1" class="cls-1" d="M506,4l691,656,246-221" style="stroke: #fff; filter: none; fill: inherit"/> </g> </svg> Javascript: jQuery(document).ready(function(){ var t1 = new TimelineMax({repeat:-1}); t1 .from("#path1",2 ,{drawSVG:0}); }); I included the necessary greensock files using "wp_register_script" and "wp_enqueue_script". I utilized visual composers Raw HTML and JS elements to define the above code. But the animation isnt happening and there is no error on the console either. Following are my enqueue scripts: wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js' ); wp_register_script( 'TimeLineMax', get_template_directory_uri() . '/greensock/TimelineMax.min.js' ); wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js' ); wp_enqueue_script( 'TweenMax' ); wp_enqueue_script( 'TimeLineMax' ); wp_enqueue_script( 'DrawSVG' ); Simple Tweens such as changing filter to inherit is working fine with the SVG but animations like MorphSVG and DrawSVG seems to do nothing. Am I doing anything wrong or am I missing something. Any help would be great! Thank you in advance!

Hey fellow GreenSockers. I was going to post this in the SVG Gotchas thread, but this question is asked a lot around here so I thought maybe a new topic would be the way to go. SVG circles start at 3 o’clock and most people want to animate the stroke from the 12 o’clock position. Conventional wisdom would tell you to simply rotate the circle by -90 degrees and you’re all set, but there are some problems with this approach. Using GSAP to rotate the circle -90 degrees will work perfectly fine in Chrome and FF, but Safari will ignore that set() for some reason. (IE and Edge honor the rotation, but they have another problem.) You can simply add a transform attribute directly to the circle like <circle cx="500" cy="75" r="60" transform="rotate(-90 500 75)"/> This will work correctly in Chrome, FF and Safari, but not completely in IE and Edge. If you're animating the stroke with DrawSVG, IE and Edge need the stroke-dasharray set to 0 in the attributes or they will cause problems. If you don’t add that attribute, a regular circle will start at 9 o’clock and the circle that you’ve rotated -90 degrees with GSAP or a transform attribute will start at 6 o’clock. Strangely, if you resize the browser window to the point of the SVG changing size, IE and Edge will correct themselves. The only bulletproof way I see to draw a circle stroke from the 12 o’clock position with DrawSVG in all browsers is transforming the circle -90 degrees and adding the extra attributes to keep IE and Edge happy. <circle cx="500" cy="225" r="60" stroke-dashoffset="0" stroke-dasharray="0" transform="rotate(-90 500 225)"/> It appears that only adding the stroke-dasharray attribute fixes the IE/Edge issues, but I also add a stroke-dashoffset="0" attribute also just to be safe. Check out the demo in all your browsers. Hopefully this helps somebody with this type of animation. Happy tweening.

I hit a strange DrawSVG issue on my latest project. I was hunting every line of JS thinking I was doing something wrong, but I finally narrowed it down to the SVG stroke-linecap. If I set the stroke-linecap to 'round' or 'square', IE11 and Edge won't display the stroke as it animates. DrawSVG is animating all the values, but those two browsers display nothing. The weird thing is if I animate a new value for the strokeWidth along with the drawSVG animation, it works perfectly. Even a 1/1,000th change makes it work. Any strokeWidth value works as long as it isn't the same as the original value in the SVG. Another oddity is setting the stroke-linecap to 'butt', 'inherit' or leaving it out causes no problems either. All is fine in Chrome and FF, but the Microsoft browsers are behaving like fussy children.

Hello and thanks in advance to anyone who helps. I have a simple logo that I'm using DrawSVG on. I started using CSS only using stroke-dashoffset and stroke-dasharray Then I forked the DrawSVG CodePen to try that and added in my logo (see codepen link, look really closely to see the notches in the line on the codepen and reference my attached image). Both CSS only method and DrawSVG use stroke-dashoffset and stroke-dasharray to animate the line drawing effect. Notches problem: I believe it is stroke-dasharray that causes the notches in my path outline. (See attached image for notches). Once stroke-dasharray is at 0 the notches go away. I've also tried to save the svg with paths grouped in various ways out of adobe illustrator. I'm brand new to SVG's and animating them. Fingers crossed that someone has a fix for me.

Hi there, I have attempting to get the scrollmagic and drawSVG to work in succession together but having little luck. I have followed each step in setting up the scrollmagic scene and applied the drawSVG tween to path elements with the appropriate class that I want animated, but seem to be having no luck. Any help getting this resolved so I can trigger the paths to draw downwards as the user scrolls would be greatly appreciated! Cheers, Jon

Hey all, I think I must be overlooking something pretty basic here - would appreciate any help. I simply want to animate this heart which is broken into 2 strokes, "heartL" and "heartR." I want each stroke to animate 0-100% but I can't seem to get them to work. 2 Quick notes: 1. I am adding the SVG from JS because that's what I need to do in my particular case outside this example. 2. I don't know how to add drawSVGplugin in codepen bc I only have a local copy and didn't want to put it up somewhere where people could just steal it... Thanks for any help you can offer! B

I want the SVG animation that I found on the left to have the same effect on the right element. What am I doing wrong?!!?!!?! This is driving me crazy -- why is there a double stroke effect? How can I fix this. Any assistance would be greatly appreciated. Thanks!

Hello there, this is my first time posting in the GreenSock forum, please be nice Essentially, I am trying to animate an SVG pie graph, today is my first day using DrawSVG, and I would really like someone to help me with a starting point So far I have successfully animated a few layers on the pie graph, but I am now having trouble animating the text. I have converted them to paths in illustrator. I am using tweenmax, timelinemax, drawsvg, and I will be using scrollMagic to trigger the effects. Here is my SVG code <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve"> <style type="text/css"> .st0 { fill: none; stroke: #FF0000; stroke-width: 1.9271; stroke-miterlimit: 10; } .st1 { fill: none; stroke: #9A0D12; stroke-width: 1.9271; stroke-miterlimit: 10; } .st2 { opacity: 0.22; fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-miterlimit: 10; } .st3 { fill: none; stroke: #FF0000; stroke-width: 10.599; stroke-linecap: round; stroke-miterlimit: 10; } .st4 { fill: none; stroke: #9A0D12; stroke-width: 10.599; stroke-linecap: round; stroke-miterlimit: 10; } .st5 { fill: #FFFFFF; } </style> <line class="st0" id="path1" x1="344.9" y1="108.9" x2="439.3" y2="108.9" /> <line class="st1" id="path2" x1="345.3" y1="199" x2="439.8" y2="199" /> <circle class="st2" id="path3" cx="267.3" cy="200" r="115.6" /> <circle class="st2" id="path4" cx="267.3" cy="200" r="77.6" /> <path class="st3" id="path5" d="M267.3,84.4c63.9,0,115.6,51.8,115.6,115.6s-51.8,115.6-115.6,115.6c-22.6,0-43.6-6.5-61.4-17.6" /> <path class="st4" id="path6" d="M267.3,122.4c42.8,0,77.6,34.7,77.6,77.6c0,39.9-30.2,72.8-68.9,77.1" /> <g> <g> <path class="st5" d="M404.2,127.9c0.3-0.4,0.6-0.7,0.9-0.8c0.7-0.5,1.5-0.7,2.5-0.7c1.7,0,3,0.7,3.8,2c0.6,1,0.9,2.2,0.9,3.6 c0,1.4-0.3,2.6-0.8,3.6c-0.8,1.7-2.3,2.5-4.4,2.5c-2.1,0-3.5-0.9-4.3-2.6c-0.6-1.2-0.8-3-0.8-5.3c0-7.2,2.1-10.8,6.4-10.8 c0.9,0,1.7,0.1,2.6,0.4v1.6c-1-0.3-1.8-0.5-2.6-0.5c-1,0-1.9,0.4-2.5,1.2c-0.7,0.9-1.1,2.1-1.4,3.7 C404.3,126.4,404.2,127.1,404.2,127.9z M407.2,127.7c-0.8,0-1.5,0.3-2.1,1c-0.7,0.8-1,1.9-1,3.4c0,1.3,0.2,2.3,0.6,3.2 c0.5,1,1.3,1.5,2.3,1.5c1.1,0,1.9-0.5,2.3-1.6c0.4-0.9,0.6-1.9,0.6-3.2c0-1.1-0.2-2.1-0.5-2.9C409,128.2,408.2,127.7,407.2,127.7z " /> <path class="st5" d="M420.8,119.4c2.3,0,3.8,1,4.6,3.1c0.5,1.3,0.8,3.4,0.8,6.3c0,3.1-0.3,5.4-1,6.7c-0.9,1.8-2.3,2.6-4.4,2.6 c-2.2,0-3.8-1-4.6-3.1c-0.5-1.3-0.8-3.4-0.8-6.4c0-3.1,0.3-5.3,1-6.6c0.4-0.8,1-1.5,1.6-1.9C418.8,119.7,419.7,119.4,420.8,119.4z M420.8,120.9c-1.3,0-2.2,0.8-2.6,2.5c-0.3,1.1-0.5,2.9-0.5,5.3c0,2.8,0.2,4.8,0.6,5.9c0.5,1.4,1.4,2.1,2.5,2.1 c1.3,0,2.2-0.8,2.7-2.5c0.3-1.1,0.5-2.9,0.5-5.4c0-2.8-0.2-4.7-0.6-5.8C422.8,121.6,422,120.9,420.8,120.9z" /> <path class="st5" d="M430.7,118.8c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9 c-0.9,0-1.5-0.3-1.8-1c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C429.3,119.1,429.9,118.8,430.7,118.8z M430.7,119.4 c-0.4,0-0.6,0.2-0.8,0.7c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.4,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.7-0.2,0.8-0.7 c0.1-0.3,0.2-0.9,0.2-1.6c0-0.8-0.1-1.3-0.2-1.7C431.3,119.5,431.1,119.4,430.7,119.4z M430.7,129.8l4.8-10.8h0.9l-4.8,10.8H430.7 z M436.5,124.2c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9c-0.9,0-1.5-0.3-1.8-1 c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C435.1,124.5,435.6,124.2,436.5,124.2z M436.5,124.8c-0.4,0-0.6,0.2-0.8,0.7 c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.4,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.6-0.2,0.8-0.7c0.1-0.3,0.2-0.9,0.2-1.6 c0-0.8-0.1-1.3-0.2-1.7C437.1,125,436.8,124.8,436.5,124.8z" /> </g> </g> <g> <g> <path class="st5" d="M408.4,226.8v-4.2h-7.1v-1.4l5.4-12.4h2.1l-5.4,12.3h4.9v-4.5h2.1v4.5h2.1v1.5h-2.1v4.2H408.4z" /> <path class="st5" d="M423.6,218.3c-0.3,0.3-0.5,0.6-0.7,0.7c-0.7,0.6-1.6,0.8-2.7,0.8c-1.7,0-3-0.7-3.8-2 c-0.6-0.9-0.9-2.1-0.9-3.6c0-1.4,0.3-2.5,0.8-3.5c0.8-1.6,2.3-2.5,4.4-2.5c2.1,0,3.5,0.9,4.4,2.6c0.6,1.2,0.8,3,0.8,5.5 c0,2.4-0.2,4.3-0.6,5.8c-0.8,3.2-2.7,4.8-5.9,4.8c-1,0-2.1-0.1-3.1-0.4v-1.6c1.1,0.4,2.1,0.5,3.1,0.5c1.8,0,3-0.9,3.6-2.8 c0.3-0.9,0.4-2,0.5-3.3C423.5,219.3,423.6,218.9,423.6,218.3z M420.7,209.7c-1.1,0-1.9,0.5-2.3,1.5c-0.4,0.8-0.6,1.9-0.6,3 c0,1.1,0.2,2,0.5,2.7c0.5,0.9,1.2,1.4,2.2,1.4c0.8,0,1.5-0.3,2.1-1c0.7-0.8,1-1.8,1-3.2c0-1.2-0.2-2.3-0.6-3.1 C422.5,210.2,421.7,209.7,420.7,209.7z" /> <path class="st5" d="M430.7,207.8c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9 c-0.9,0-1.5-0.3-1.8-1c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C429.3,208.1,429.9,207.8,430.7,207.8z M430.7,208.4 c-0.4,0-0.6,0.2-0.8,0.7c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.3,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.7-0.2,0.8-0.7 c0.1-0.3,0.2-0.9,0.2-1.6c0-0.8-0.1-1.3-0.2-1.7C431.3,208.5,431.1,208.4,430.7,208.4z M430.7,218.8l4.8-10.8h0.9l-4.8,10.8H430.7 z M436.5,213.2c0.9,0,1.5,0.3,1.8,1c0.2,0.4,0.3,1,0.3,1.8c0,0.9-0.1,1.5-0.4,2c-0.3,0.6-0.9,0.9-1.7,0.9c-0.9,0-1.5-0.3-1.8-1 c-0.2-0.4-0.3-1-0.3-1.8c0-0.8,0.1-1.5,0.4-1.9C435.1,213.5,435.6,213.2,436.5,213.2z M436.5,213.8c-0.4,0-0.6,0.2-0.8,0.7 c-0.1,0.3-0.2,0.9-0.2,1.5c0,0.8,0.1,1.3,0.2,1.7c0.1,0.4,0.4,0.6,0.7,0.6c0.4,0,0.6-0.2,0.8-0.7c0.1-0.3,0.2-0.9,0.2-1.6 c0-0.8-0.1-1.3-0.2-1.7C437.1,214,436.8,213.8,436.5,213.8z" /> </g> </g> </svg> and here is my Javascript $(document).ready(function () { //graph svg animation var shapes = $("line, circle, path") , tl = new TimelineMax(); tl.from(shapes, 2, { drawSVG: 0 , delay: 0.5 }) }); I would like the lines to come in second to last, and the numbers to come in very last. I have tried to create a pen for this project -> but I don't think there is a CDN for drawsvg http://codepen.io/erayner/pen/GWMGLq Any help is greatly appreciated.

Hey all! My first time with a problem that I couldn't solve via the docs or forums on my own. I'm taking a stab at drawSVG and morphSVG. I've had success animating more simply SVG's that were created as icons. When I take a svg logo for a company, I can't seem to figure out how to draw it out or morph. I'm wondering is someone can help me create a simple draw animation for a logo and show me how to build out paths if possible. I haven't been able to find any examples of complex SVG's being animated. If you have any examples that would be great to see as well! Here is the svg code for one of the logos. <svg version="1.1" id="image1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 201 72" style="enable-background:new 0 0 201 72;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#005DAA;} .st2{fill:#E31837;} </style> <path class="st0" d="M192.9,20.8c-3.2-3.9-8.8-6.1-15.5-6.1c-7,0-13.3,2.4-17.7,6.3l0.7-4.5l-1.9-0.6c-2.7-0.8-5.7-1.2-8.6-1.2 c-5.1,0-9.9,1.6-13.9,4.2l1.1-3.7h-30.4l-0.4,1.2c-2.7-1.1-5.7-1.6-9-1.6c-6.3,0-13,2.4-16.5,7.1c-0.2-0.3-0.5-0.7-0.7-1 c-3.2-3.9-8.8-6.1-15.5-6.1c-6.8,0-13,2.2-17.3,5.9l1.7-10.3l-1.9-0.6c-3.3-1-6.9-1.5-10.6-1.5c-13.3,0-25.4,8.5-27.6,19.3 c-0.9,4.6,0.2,9,3,12.5c2.4,3,6,5.1,10.3,6.2H9.2v16.9h67.2l0.1-0.2l0,0.2h8.1l1.1-1.8l-0.3,1.8h18.3l0.3-1.4c1.6,1,3.7,1.6,6.1,1.6 c2.1,0,4.1-0.4,5.9-1.2l-0.2,1h10.9h3.6h11.1l0-0.2c1.2,0.3,2.4,0.4,3.6,0.4c0.7,0,1.5-0.1,2.2-0.2h9.8l0.7-1.5h0.7l0.2,1.5h4.5h6 h4.9h3.6h11.1l1.5-7.9h-0.5l0.2-1.1h0.4l1.5-7.9h-0.8c0.7-0.6,1.2-1.4,1.3-2.3c0.2-1.1-0.1-2.2-0.8-3c-0.2-0.2-0.4-0.4-0.6-0.6 c2.4-2.5,4-5.4,4.7-8.8C196.3,27.5,195.4,23.8,192.9,20.8z M175.5,54.6h-0.9l1.4-7.3c0.3,0,0.6-0.1,0.9-0.1L175.5,54.6z M153.9,30.8 c-0.1,0.5-0.2,1-0.2,1.5c-2,1.4-3.9,2-6,2c-1.4,0-2.6-0.5-3.2-1.2c-0.4-0.4-0.5-0.9-0.4-1.5c0.4-1.9,2.9-3.5,5.5-3.5 c1.6,0,3.1,0.6,4.5,1.7C154.1,30.1,154,30.4,153.9,30.8z M156,46.2l-1,1.6l-0.8-0.5c-0.5-0.3-1.1-0.5-1.7-0.7 c0.4-0.1,0.9-0.2,1.2-0.4l1.2-0.4l1.1-5c0.2,0.2,0.3,0.4,0.5,0.6c1.7,2.1,4.2,3.7,7.2,4.7L156,46.2L156,46.2z M166.1,46.9l-0.4,2.1 l-0.5-2.3C165.4,46.8,165.7,46.9,166.1,46.9z M175.7,28.2c1.2,0,2.2,0.3,2.7,0.9c0.5,0.5,0.4,1.3,0.3,1.7c-0.4,2-2.5,3.5-5.1,3.5 c-1.3,0-2.3-0.3-2.7-0.9c-0.3-0.4-0.4-1-0.3-1.7C171,30,172.8,28.2,175.7,28.2z M118.5,47.8c-0.4-0.2-0.7-0.5-1.1-0.6h1.3 L118.5,47.8z M111.6,54.6c-0.2,0.1-0.4,0.2-0.7,0.3C111,54.8,111.2,54.6,111.6,54.6z M109.6,28.4l-1.5,5c-0.1-1.3-0.5-2.5-1.2-3.6 c-0.3-0.4-0.7-0.8-1-1.2L109.6,28.4z M66.1,30.9c-0.4,2-2.5,3.5-5.1,3.5c-1.3,0-2.3-0.3-2.7-0.9c-0.3-0.4-0.4-1-0.3-1.7 c0.3-1.8,2.2-3.5,5.1-3.5c1.2,0,2.2,0.3,2.7,0.9C66.2,29.7,66.2,30.4,66.1,30.9z M83.5,47l0,0.1L83.5,47C83.4,47,83.5,47,83.5,47z M105.9,40.4l-1.8,5.8h-6.8C100.9,45.1,104,43.2,105.9,40.4z M106.7,47.1h0.4c-0.1,0.1-0.3,0.1-0.4,0.2L106.7,47.1z M33.9,31.9 c-1.9,0-3.6-0.6-4.5-1.7c-0.5-0.6-0.7-1.3-0.5-2.1c0.5-2.5,3.9-4.7,7.4-4.7c2.4,0,4.5,0.9,6.7,2.7c-0.6,1-1,2.1-1.3,3.3 C39,31.1,36.5,31.9,33.9,31.9z M73.7,43.8l2.2,1c1.2,0.5,2.6,1,4,1.4h-4.1l-0.4,0.9l-0.1-0.9h-7.1C70.2,45.6,72,44.8,73.7,43.8z M127.2,54.6l1.6-8.4h-7.7l5.4-17.9l1.7,0.1c-0.3,0.8-0.6,1.6-0.7,2.5c-0.8,4,0.2,7.8,2.6,10.8c1.6,2,3.9,3.5,6.5,4.5h-6.8l-1.6,8.4 L127.2,54.6L127.2,54.6z M41.1,45.6l1.2-0.4l1-4.3c0.2,0.2,0.3,0.5,0.5,0.7c1.7,2.1,4.2,3.7,7.2,4.7H38.6 C39.5,46.1,40.4,45.9,41.1,45.6z M180.9,46.2c1-0.3,2-0.7,2.9-1.1c0.1,0.3,0.3,0.6,0.5,0.9c0,0.1,0.1,0.1,0.2,0.2H180.9z"/> <g> <path class="st1" d="M73.1,48.5l0.5,7.4h0.1c0.2-0.8,0.5-1.5,0.9-2.3l2.5-5.1h4.1l0.6,7.4H82c0.2-0.7,0.5-1.5,0.8-2.2l2.5-5.2h5.6 l-7.6,12.3h-4.7l-0.4-6.7H78c-0.2,0.6-0.3,1.3-0.6,1.9L75,60.8h-4.6l-2.8-12.3H73.1z"/> <path class="st1" d="M90.5,48.5h5.2l-0.8,4.2h3.3l0.8-4.2h5.2l-2.3,12.3h-5.2l0.8-4.3h-3.3l-0.8,4.3h-5.2L90.5,48.5z"/> <path class="st1" d="M119.4,54.7c-0.8,4-4.9,6.3-9.4,6.3c-4.5,0-7.7-2.4-7-6.3c0.7-3.9,4.9-6.4,9.4-6.4S120.1,50.8,119.4,54.7z M108.4,54.8c-0.3,1.4,0.7,2.4,2.3,2.4c1.6,0,3-1,3.2-2.4c0.2-1.3-0.6-2.4-2.3-2.4C109.9,52.4,108.6,53.5,108.4,54.8z"/> <path class="st1" d="M120.6,48.5h5.4l-1.6,8.4h4.5l-0.8,4h-9.9L120.6,48.5z"/> <path class="st1" d="M141.6,56.4l0.2,0.2c0.8,0.6,1.9,1.1,3.1,1.1c0.5,0,1.4-0.2,1.5-0.7s-0.6-0.6-1.1-0.7l-1.1-0.2 c-2-0.3-3.6-1.3-3.2-3.3c0.6-2.9,4.1-4.6,7.3-4.6c1.7,0,3.2,0.3,4.5,1.1l-2.1,3.2c-0.8-0.5-1.8-0.9-2.9-0.9c-0.5,0-1.2,0.1-1.3,0.7 c-0.1,0.5,0.6,0.5,1,0.6l1.2,0.2c2.2,0.4,3.7,1.4,3.3,3.5c-0.6,2.9-4.1,4.4-7.3,4.4c-1.9,0-3.9-0.4-5.5-1.1L141.6,56.4z"/> <path class="st1" d="M160.1,56.4l-0.2-2.2c-0.1-0.5-0.1-1.1-0.1-1.6h-0.2l-1.7,3.8H160.1z M155.4,60.8h-5.7l7.5-12.3h6l2.9,12.3 h-5.7l-0.2-1.5h-4.1L155.4,60.8z"/> <path class="st1" d="M168,48.5h5.4l-1.6,8.4h4.5l-0.8,4h-9.9L168,48.5z"/> <path class="st1" d="M178.9,48.5h10l-0.6,3.4h-4.5l-0.2,1.2h4.1l-0.6,3.2h-4.1l-0.2,1.2h4.7l-0.6,3.4h-10.1L178.9,48.5z"/> <g> <path class="st2" d="M105.8,26.3l6.8-0.3l-5.7,18.8h12.2l5.7-18.8l6.6,0.3l2.7-8.9h-25.6L105.8,26.3z"/> <path class="st2" d="M80.6,31.2C78.9,40,69.5,45.3,59.3,45.3c-10.2,0-17.5-5.3-15.8-14.1c1.7-8.6,11.1-14.2,21.3-14.2 C75,16.9,82.3,22.6,80.6,31.2z M55.7,31.3c-0.6,3.1,1.6,5.3,5.3,5.3c3.7,0,6.7-2.1,7.3-5.3c0.6-2.9-1.4-5.4-5.2-5.4 C59.2,26,56.3,28.4,55.7,31.3z"/> <path class="st2" d="M76.8,42.8c3.5,1.6,8.2,2.5,12.4,2.5c7.3,0,15.2-3.2,16.5-9.8c0.9-4.7-2.4-6.9-7.4-7.9l-2.7-0.5 c-0.9-0.2-2.4-0.3-2.2-1.3c0.2-1.1,1.8-1.5,2.9-1.5c2.6,0,4.8,0.9,6.7,2.1l4.7-7c-3-1.6-6.3-2.4-10.2-2.4 c-7.3,0-15.3,3.6-16.5,10.2c-0.8,4.3,2.7,6.6,7.4,7.3l2.4,0.4c1.1,0.2,2.7,0.3,2.4,1.5s-2.2,1.6-3.4,1.6c-2.8,0-5.2-1.1-7.1-2.5 L82,35L76.8,42.8z"/> <path class="st2" d="M157.9,18.1c-2.4-0.7-5.2-1.1-8-1.1c-9.8,0-18.8,6.4-20.3,14.4c-1.5,7.8,4.8,13.9,14.4,13.9 c2.2,0,6.8-0.3,8.9-1.1l2.3-10.3c-2.3,1.6-4.7,2.5-7.5,2.5c-3.6,0-6.4-2.3-5.8-5.4c0.6-3,4-5.4,7.7-5.4c2.8,0,5,1.3,6.6,2.8 L157.9,18.1z"/> <path class="st2" d="M177.5,16.9c-10.2,0-19.6,5.6-21.3,14.2c-1.7,8.8,5.6,14.1,15.8,14.1c10.2,0,19.6-5.3,21.3-14.1 C195,22.6,187.7,16.9,177.5,16.9z M175.7,26c3.9,0,5.8,2.4,5.2,5.4c-0.6,3.1-3.6,5.3-7.3,5.3s-5.9-2.1-5.3-5.3 C169,28.4,171.9,26,175.7,26z"/> <path class="st2" d="M46.6,11.9c-3-0.9-6.5-1.4-9.9-1.4c-12.3,0-23.4,7.8-25.4,17.4c-1.9,9.5,6,16.8,17.9,16.8 c2.7,0,8.5-0.4,11.1-1.3l2.9-12.4c-2.8,1.9-5.8,3.1-9.3,3.1c-4.6,0-7.9-2.8-7.2-6.5c0.7-3.6,5-6.5,9.6-6.5c3.4,0,6.2,1.5,8.3,3.3 L46.6,11.9z"/> <path class="st2" d="M185.8,43.5c0.2-1,1.3-1.7,2.4-1.7c1.2,0,1.9,0.8,1.8,1.7c-0.2,1-1.3,1.7-2.4,1.7 C186.4,45.3,185.6,44.5,185.8,43.5z M189.4,43.5c0.1-0.8-0.4-1.3-1.3-1.3c-0.9,0-1.6,0.5-1.8,1.3c-0.1,0.8,0.4,1.3,1.3,1.3 C188.5,44.8,189.3,44.3,189.4,43.5z M188.7,44.4h-0.5l-0.3-0.8h-0.4l-0.1,0.8h-0.5l0.3-1.8h1.1c0.5,0,0.7,0.1,0.6,0.6 c-0.1,0.3-0.3,0.5-0.6,0.5L188.7,44.4z M188,43.3c0.2,0,0.4,0,0.5-0.2c0-0.2-0.2-0.2-0.4-0.2h-0.5l-0.1,0.4H188z"/> </g> <polygon class="st1" points="12.2,60.9 69.3,60.9 69.2,60.8 69.2,60.8 68.5,57.7 12.2,57.7 "/> <polygon class="st1" points="12.2,56.4 68.2,56.4 67.4,53.2 12.2,53.2 "/> <polygon class="st1" points="12.2,51.9 67.1,51.9 66.9,50.7 66.4,48.5 12.2,48.5 "/> <path class="st1" d="M131.5,48.5h10l-0.6,3.4h-4.5l-0.2,1.2h4.1l-0.6,3.2h-4.1l-0.2,1.2h4.7l-0.6,3.4h-10.1L131.5,48.5z"/> </g> </svg>

Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });

Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations are stuttering a lot (depending on your computer/device). I have to say that I'm new to Greensock and also not the most experienced developer, so I would appreciate every advice of you. Regarding my code I guess there's a lot of potential for optimization. Especially the way of adding the subtimelines to the maintimeline and calling the functions of the subtimeline is probably wrong. For example: var mainTimeline = new TimelineMax({repeat:-1}); mainTimeline.add(websiteTimeline(website)); function websiteTimeline(website) { MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); // Create sub timeline var timeline = new TimelineMax(); // Add tweens to sub timeline timeline.call(morphToPhone); function morphToPhone() { TweenMax.to("#bezel-macbook", 0.2, {morphSVG:"#bezel-phone"}); TweenMax.to("#camera-macbook", 0.2, {morphSVG:"#camera-phone"}); TweenMax.to("#screen-macbook", 0.2, {morphSVG:"#screen-phone"}); TweenMax.to("#shape-macbook", 0.2, {morphSVG:"#lock-phone", css:{opacity:0}}); TweenMax.to("#line-macbook", 0.2, {morphSVG:"#speaker-phone", css:{opacity:0}}); TweenMax.to("#touchpad-macbook", 0.2, {morphSVG:"#lock-phone"}); } } I also already read about the performance differences between JavaScript and CSS, so my next step would be to use more pure CSS and less TweenMax animations, but I wanted first ask you guys, if you have some better advices for me. I hope anyone of you can help me. Here again the links to my Codepen and demo... Codepen: http://codepen.io/mathis-krueper/pen/ZeQEzZ Demo: http://mathis-krueper.de/captain/references/ Thanks in advance!

I am trying to create an animation using GSAP and ScrollMagic. The first codepen includes the desired animation. I am trying to trigger this at various parts through the animation. http://codepen.io/c308marketing/pen/RKXJQE The second codepen is the controller I am trying to build to accomplish this. What am I doing wrong? http://codepen.io/c308marketing/pen/WRVyzv Also, there is a black box that is covering the text that fades in…not sure where that is coming from either. Any help would be greatly appreciated.

render path/circle/rect in svg structure oneByOne or sync or delayed https://camo.githubusercontent.com/f43cf260e6ba5badcb4fb05f99270ea6cd1c539f/68747470733a2f2f7261772e6769746875622e636f6d2f6d617877656c6c69746f2f76697675732f6d61737465722f6173736574732f6f6e6542794f6e652e706e67[] here is the example http://maxwellito.github.io/drafts/vivus-issue-85/ i am compare vivus and greensock , it same vivus (https://github.com/maxwellito/vivus) has more control on animation timeline I am a greensock newbee, i have no idea does the gsap timeline api can control path in svg

Hi guys! I'm working on a project for which I'd like to animate the drawing of a handwritten signature. The desired effect is to have it like it's being written. Here is the base file: I tried to vectorize the image using Illustrator, which worked, but the paths that are created are "looped", meaning that it's not one stroke. Thus, when I stagger the paths, they appear to do a "round-trip" around the letters. Do you know of a way that would allow me to animate it in one stroke? Preferably one that doesn't involve redrawing the whole signature manually Thank a lot in advance.

I am working on this animation, it looks great in firefox, however it does not work properly in chrome. Am I missing something to make it work properly?

Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data. I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin. The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things. Please see attached Codepen for a demo. Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.

I'm trying to change the origin point of my staggering elements. Both are a path which visualy start drawing at the top of the line then goes down. Is there any way to tell GSAP to start at the bottom of the path then up. I tried with transform orignins without success. Thanks in advance!

Hi, I try to control two objects by hover: http://codepen.io/mikeK/pen/ZBqPdB But I can not find a way to "block" the non-active "line". Plus, if hover change is too fast, the animation of SVGs will be disturbed. Best regards from Hamburg Manfred

Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); });

Hey guys! I'm trying to draw out a rather dense set of SVGs. Ideally I'd like to draw out EVERYTHING, including the boxes on top, and the text (if that's possible?). But either way I'm having weird issues with the timing. I'm guessing it's related to how I am calling the "shapes" variable, like maybe it's running through a LOT of shapes, but only really drawing the lines? Any suggestions would be helpful!