Jump to content

Search the Community

Showing results for tags 'drawsvg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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
  2. 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.
  3. 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!
  4. 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.
  5. 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.
  6. 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
  7. 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
  8. 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!
  9. 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>
  10. 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.
  11. 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 });
  12. 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!
  13. 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.
  14. 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
  15. 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?
  16. 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.
  17. 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!
  18. 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
  19. 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); }); });
  20. I'm playing around with a whiteboard drawing idea where a hand with a pen draws in the SVG. (i know it's not really a new idea - just playing around with it) I've got it working but when the hand jumps to start drawing in a new line, it's immediate. Wondered what the best way to tween the hand to the first coordinate of a bezier curve would be. Is there some built-in GSAP magic or should I create a bezier from the current point of the hand to the first point of the next line? Any ideas?
  21. 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!
  22. I'm creating an app in a node.js environment and using a set of functions like the ones in the codepen. The codepen works and everything works in the node.js app as well except this call in the hideStrokes function: TweenMax.set(shapes, {drawSVG:0}); I see the svg container animate to the center of the screen but the lines in the svg appear as soon as I run the unHideSVG function. I can inspect the page using Chrome's dev tools and see that the drawSVG script was executed properly because I can see all the transforms, etc. Works in the codepen though. Anyone know of a reason why that particular call would fail in a node environment? http://codepen.io/swampthang/pen/RRoJOp/ By the way, I am using the npm install version of gsap and it did install all of the files and plugins in the node_modules directory. In the js file where all the functions are running I require the module like: var TweenMax = require("gsap"); Calls to drawSVG are not erroring so I assume it's finding it.
  23. This is not as much a "having a problem with.." issue as it is a best practice question. Might even be an SVG gotcha. The codepen shows attaching a drawing tool (like a pencil or whatever) to a drawSVG line drawing by using MorphSVGPlugin.pathDataToBezier and following drawSVG. Got it working pretty quickly but when I started testing a few SVGs, I ran into compound paths - where there were multiple M's in a single path creating separate visual lines. When drawSVG runs by itself (with no visual pen image following along) it's not noticeable that compound move-to paths are drawing multiple lines in at the same time. But, when you're trying to make it look like a pen is drawing a line at a time it quickly falls apart visually. So, I wrote a rather ugly function to check for and break apart compound paths and then replace them all. function breakApartPaths(paths, svg) { var sepPaths = []; for ( let path of paths ) { var pdata = path.getAttribute('d'); pdata = pdata.trim(); var subArr = pdata.split('M'); for ( let M of subArr ) { if(M != "") { var newPath = document.createElementNS("http://www.w3.org/2000/svg", 'path'); for ( var a = 0; a < path.attributes.length; a++ ) { var N = path.attributes[a].name; var V = path.attributes[a].value; if(N != 'd') { newPath.setAttributeNS('',N,V); } } newPath.setAttributeNS('','d',`M${M}`); sepPaths.push(newPath); } } } return sepPaths; } I get the sepPaths array, and then remove all the paths, replacing them with the new paths like this... var paths = document.querySelectorAll(`${svgID} path`); var newPaths = breakApartPaths(paths,$(svgID)[0]); for( path of paths ) { $(svgID)[0].removeChild(path); } for( path of newPaths ) { $(svgID)[0].appendChild(path); } It works but feels a little dangerous. Anyone know a little safer, more DRY way to do this?
  24. Hi I've started using the drawSVG plugin and I have a problem with my animation, namely the path itself is being broken up into individual sections. I cannot seem to get to the root of the problem. I've copied the code into this codepen http://codepen.io/pauljohnknight/pen/WGkbjB to illustrate what is happening. I've included two sets of SVG, the first is the code for the original SVG and the second is the problematic one with the animation on. My initial thoughts are I need to change the something about the source SVG code, but I can't seem to work out what aspect of it may be incorrect. Thanks in advance for any help. Paul.
  25. Good evening, We having some problem with Drawsvg Plugin. I try to explain what is our problem: In this case, I have a Timeline, with the three states of some button ( the labels "over", "out" and "cli" severaly). In the third state ( the last), it launch the event "click" to execute the code in the "cli" Label. But, as we could see in the developer inspector, the property stroke-dasharray has changed when the DrawSVG is doing when we don´t change this element (polyline class="st1") in anytime. In the inspector you can see this value: stroke-dasharray: 0px, 999999px; Here we put the URL of the codePen that I make like a example: http://codepen.io/stoicom/pen/rrdAJj If you should take a look, and tell me which could be the problem, or error? Thank you very much for yout support. Best Regards!! Rogelio Silván.