Jump to content
GreenSock

Search the Community

Showing results for tags 'svg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi Guys! I have a problem with my animation. I don't know why, only when I move mouse scroll or change width of codepen window, my animation start playing. I want to create continuous animation but I don't know what I'm doing wrong.
  2. 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.
  3. In an attempt to learn GSAP and other web transitioning concepts, I've decided to start mimicking random UI concepts and examples. Any feedback, advice, best practices, other ways you might have approached the concept would be greatly appreciated. This is attempt number 2. Concept link: https://twitter.com/ProductHunt/status/782809916343984129
  4. Hey all, I have a query regarding animating along an SVG path. I have been able to get the circles animated as per the codepen demo but due to the path going in different directions, i'm struggling to figure out what I do with the arrows. Basically, the arrows are down, left and right and I was wondering if there was a way that I could change the direction of these arrows depending on where they are along the path? I just think the animation will look odd when the arrow is animating downwards but is facing right for example. The codepen demo is as far as I have got in terms of animating this. Thanks
  5. Hi all, I'm trying to animate an SVG <line> and a <circle> which are both dashed. What I need is the dashes to be shown one-by-one (staggered, I guess ) to make the line "drawn". I've tried animating the strokeDasharray like so (where "secondStepDashedLine" is the <line> element) which didn't do anything really: tlInitial.staggerFrom(secondStepDashedLine, 1, { strokeDasharray: 0 }, 1.5); Is there any way of doing this? Thanks in advance.
  6. In an attempt to learn GSAP and other web transitioning concepts, I've decided to start mimicking random UI concepts and examples. Any feedback, advice, best practices, other ways you might have approached the concept would be greatly appreciated. This is attempt number 1. Concept link: https://site.uplabs.com/posts/submit-button-micro-interaction
  7. I wondered if anyone can help shed some light on how I might be able to shift the starting point of an SVG path which forms the shape of a rectangle. I'm aware it's more to do with the SVG file itself, but it's well illustrated using GSAP's DrawSVG plugin (see the codepen) Ideally, the vertical rectangle would have a bottom right starting point, and the horizontal rectangle a bottom left starting point. Both currently start at the top left. I tried flipping the paths in Illustrator before exporting the SVG and various other things, but got the same results as far as these rectangles go. Also tried a few things with tools like SVGOMG, but no joy. Many thanks in advance for any help! (and apologies if this has been covered elsewhere – I couldn't find a thread concerned with this here)
  8. Hi Greensocks, after reading tons of topics on the subject of animating svg I did not find an answer that works properly for my goal. Now I desperately need your help: Elements inside my svg are scaled to 2.8 by click. After that I need them to be centered inside the viewbox. Scaling works fine, centering does not. Do you have any suggestions? Cheers Gregor
  9. Hi everyone! I am working on a project that requires animating a lot of elements on the page. I am trying to use SVG instead of Canvas, and thought of using <g> and <use> tags to keep the SVG code lightweight. Basically, I am trying to copy paste the svg element and its animation, but placing it in a different position. However, I can't seem to animate the <use> tag (see attached Codepen). I tried adding an id="redCircle" to it too, but javascript doesn't seem to pick it up and won't animate it. Any help?
  10. Hi All, I am trying to achieve a blinking eye effect. Ideally, I would like the eye to travel down from the top to half in the eye, this would simulate the eyelid moving down the eye to meet the other eyelid. I have tried scale with transformOrigin to achieve the effect as well as opacity 0. Opacity 0 seems to give the best effect, but the visible fade doesn't look too great. Would I need to use SVGmorph to achieve this? Can anyone point me in the right direction? My codepen attached shows the example. Thanks, Tom
  11. Hi, Very simply, I'm looking at this pen - http://codepen.io/chrisgannon/pen/pbzEYr. I want to have a button that moves the dot to predefined point on the path and then stops. TIA
  12. I am using TweenMax for some animations. The animations work fine in Chrome, but Safari and Firefox both have issues with the center animation. I though GSAP removed those browser issues, so I am thinking I must be doing something wrong. Any help would be appreciated. Thanks!
  13. Hello all, a newbie here. I looked through the docs and examples, but am still a bit unsure whether the Timeline scripts could help me out with a project I'm tasked with. The project is a rather straightforward animation created in Flash/Animate which needs to be exported as SVG. The animation has four points at which the animation would need to stop. Each 'stop point' would have a corresponding button which moves the playhead backwards or forwards, depending if the clicked button is before or after where the playhead currently is at. As you might know, scripts do not go with the SVG when exporting it from Animate and so the solution would be to apply JavaScript or some such library to handle not only the navigation, but stopping the playhead at the 'stop points' or labels. Here are my initial questions/problems: * Using the TimelineLite/Max one can sequence tweens into a single timeline, but is it possible to add a single SVG animation (exported from Animate) that can be controlled with TimelineLite/Max? * Are the 'stop points' possible to implement with, say, applying labels at certain points (e.g. in seconds)? Please let me know if something needs clarification. Thanks in advance!
  14. Hi there! I've tried to find a solution in this forum but I couldn't find the same problem. It makes me even more confused! I want to animate a inline SVG made of path elements only. Safari, Firefox and Chrome don't really react the same way but I could eventually fix that by applying transformOrigin or svgOrigin depending on the browser. I also had to set transform-origin:50% 50% 0px !important; BUT! Safari looks like ignoring this setting as soon as I scale a path. It makes the path to scale from the top left of the SVG element to their original position (scale 1). The GSAP version is 1.19.0 I'm struggling for more than 4h hours especially because this animation is a spinner I use on 3 different location on the website and it doesn't work properly only on one location. Does anyone has an idea? Here is the CSS : path{ fill:#fff; opacity:0; -webkit-transform-origin:50% 50% 0px !important; transform-origin:50% 50% 0px !important; } Here is the JS for one path (every path bug the same) this._elementOrigin = ( this._forceTransformOrigin ? 'transformOrigin' : 'svgOrigin'); var from = {opacity:0, scale: 0.5}; from[this._elementOrigin] = "100% 50%"; this._timelineLeft.fromTo(this._$step1L, hD, from, { opacity:1, scale: 1, force3D: true } ); Here is the SVG <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-37.4 94 670.1 653.9" xml:space="preserve"> <path class="component__icon__spinner--7L" d="M214 494.6c-20.7 0-43.6-1.7-62.8-3.4 -2.6-0.2-4.6-0.4-5.9-0.5 -2-0.2-6.1-0.3-11.2-0.5C88.8 488.7 45 485.6 31.3 474 16.5 461.4-1 404.6 0 372.8c0.4-12.2 3.5-20.5 9.1-24.7 16.5-12.3 81.2-12.2 135.6-10.7 2.8 0.1 5.1 0.1 7 0.2 3.6 0.1 8.9 0 15-0.1 44.5-0.7 93 0.2 106 18.7 12 17.2 15.5 72.2 6.7 105.1 -3.8 14.2-9.6 23.3-17.1 26.8C251.9 493 234.1 494.6 214 494.6zM12.1 352.2l3 4c-1.7 1.3-4.7 5.2-5 17 -1 30.7 16.2 83.3 27.8 93.2 12.9 11 73.7 13 96.6 13.8 5.4 0.2 9.3 0.3 11.6 0.5 1.4 0.1 3.4 0.3 6.1 0.5 21 1.9 85.1 7.7 105.8-2.1 4.6-2.2 8.8-9.4 11.7-20.3 3.8-14.4 5.4-34.9 4.2-54.9 -1.2-19.2-4.8-35.2-9.4-41.8 -11-15.8-69.5-14.9-97.6-14.5 -6.2 0.1-11.6 0.2-15.4 0.1 -1.9 0-4.2-0.1-7-0.2 -75.3-2.1-118.9 0.9-129.4 8.7L12.1 352.2z"/> <path class="component__icon__spinner--7R" d="M381.3 494.6c-20.1 0-38-1.6-48.2-6.4 -7.6-3.5-13.3-12.6-17.1-26.8 -8.8-32.9-5.3-87.9 6.7-105.1 13-18.6 61.5-19.4 106-18.7 6.1 0.1 11.4 0.2 15 0.1 1.8 0 4.2-0.1 7-0.2 103.7-2.8 127 4.2 135.6 10.7 5.6 4.2 8.7 12.5 9.1 24.7 1.1 31.8-16.5 88.5-31.3 101.1 -13.6 11.6-57.5 14.7-102.8 16.2 -5.1 0.2-9.1 0.3-11.2 0.5 -1.3 0.1-3.4 0.3-5.9 0.5C424.9 492.9 401.9 494.6 381.3 494.6zM409.8 347.4c-29.9 0-70.1 1.8-79.1 14.6 -4.6 6.6-8.2 22.7-9.4 41.8 -1.2 20 0.4 40.5 4.2 54.9 2.9 11 7.1 18.2 11.7 20.3 20.7 9.7 84.8 4 105.8 2.1 2.6-0.2 4.7-0.4 6.1-0.5 2.2-0.2 6.2-0.3 11.6-0.5 22.9-0.8 83.8-2.9 96.6-13.8 11.6-9.9 28.8-62.5 27.8-93.2 -0.4-11.8-3.3-15.7-5-17 -10.5-7.8-54.1-10.8-129.4-8.7 -2.8 0.1-5.2 0.1-7 0.2 -3.8 0.1-9.2 0-15.4-0.1C423.1 347.5 416.8 347.4 409.8 347.4z"/> <path class="component__icon__spinner--6L" d="M190.8 509.6c-5.2 0-9.4-0.2-12.1-0.4 -2.8-0.2-6.2-0.5-10.1-0.7 -20.8-1.3-52.2-3.3-65.1-13.9 -17.2-14.1-47.9-48.9-53.8-89.6 -2.8-19.5-4.2-34.9-2-46.9 2.1-11.4 7.3-19.8 17.8-29.2 19.2-17.1 44.3-19.2 110.3-17.2 59.9 1.9 69 8.1 81.1 19.8l1.2 1.1c13.2 12.6 24.2 67.6 25.5 92.1 1.6 29.8-3.2 53.1-14 67.5C258.9 506.3 214.6 509.6 190.8 509.6zM140.9 321c-38 0-55.6 3.6-68.7 15.3l0 0c-16.4 14.6-18.6 25.9-12.6 67.2 5.5 37.7 34.1 70.1 50.2 83.4 10.5 8.6 41.1 10.5 59.4 11.7 4 0.2 7.4 0.5 10.3 0.7 20.3 1.7 73.9-2.1 82.1-13 9.4-12.5 13.5-33.6 12-61 -1.8-33.5-14.6-77.9-22.5-85.4l-1.2-1.1c-9.5-9.1-15.7-15.1-74.5-17C162.3 321.3 150.9 321 140.9 321z"/> <path class="component__icon__spinner--6R" d="M404.5 509.6c-23.8 0-68.2-3.2-78.8-17.4 -10.8-14.4-15.6-37.7-14-67.5 1.4-24.5 12.3-79.5 25.5-92.1l1.2-1.1c12.1-11.7 21.3-17.9 81.1-19.8 65.9-2.1 91.1 0.1 110.3 17.2l0 0c20.3 18.1 21.8 34.9 15.8 76.1 -5.9 40.7-36.6 75.5-53.8 89.6 -13 10.7-44.4 12.6-65.1 13.9 -3.9 0.2-7.3 0.5-10.1 0.7C413.9 509.4 409.7 509.6 404.5 509.6zM454.4 321c-10 0-21.4 0.2-34.6 0.7 -58.8 1.9-65.1 7.9-74.5 17l-1.2 1.1c-7.8 7.5-20.6 51.9-22.5 85.4 -1.5 27.4 2.6 48.5 12 61 8.2 10.9 61.8 14.8 82.1 13 2.9-0.2 6.3-0.5 10.3-0.7 18.3-1.1 49-3.1 59.4-11.7 16.1-13.2 44.8-45.6 50.2-83.4 6-41.2 3.8-52.5-12.6-67.2l0 0C510 324.6 492.4 321 454.4 321z"/> <path class="component__icon__spinner--5L" d="M231.6 480.7c-11.4 0-24.1-1.2-36.9-2.7 -3.6-0.4-6.4-0.8-7.9-0.8l-1.8-0.1c-40-1.9-62.2-6.5-69.9-14.4 -9.9-10.2-16.8-32.5-20.1-50.1 -2.1-11.2-5.9-38.3 3.2-47.8 15.7-16.4 53.9-15.4 79.2-14.8 5.1 0.1 9.5 0.2 12.6 0.2h1.7c30.2-0.9 59.9-0.4 72.9 9 9.3 6.7 12.6 30.9 13.6 44.7 1.6 19.8 1.2 56.2-10 67.4C260.9 478.4 247.7 480.7 231.6 480.7zM161.1 359.8c-20.5 0-45.9 1.7-55.7 12 -3.2 3.3-4.4 18.1-0.6 39 3.7 19.9 10.6 38 17.4 44.9 3.2 3.3 15.6 9.1 63.2 11.4l1.8 0.1c1.8 0.1 4.7 0.4 8.6 0.9 15 1.8 54.9 6.4 65.2-3.9 6.2-6.1 9.3-32.3 7.1-59.6 -1.9-23.8-6.7-35.4-9.5-37.4 -12.1-8.7-50.4-7.6-66.8-7.1h-1.7c-3.4 0.1-7.9 0-13.1-0.2C172.5 359.9 167 359.8 161.1 359.8z"/> <path class="component__icon__spinner--5R" d="M363.6 480.7c-16.1 0-29.4-2.3-36.5-9.4 -11.3-11.2-11.6-47.7-10-67.4 1.1-13.8 4.3-38 13.6-44.7 13-9.4 42.7-9.9 72.9-9h1.7c3.1 0.1 7.5 0 12.6-0.2 25.3-0.6 63.5-1.6 79.2 14.8 9.1 9.5 5.3 36.6 3.2 47.8 -3.2 17.5-10.2 39.9-20.1 50.1 -7.7 7.9-29.9 12.5-69.9 14.4l-1.8 0.1c-1.5 0.1-4.3 0.4-7.9 0.8C387.7 479.5 375 480.7 363.6 480.7zM385.2 359.8c-17.9 0-40 1.2-48.6 7.4 -2.8 2-7.6 13.6-9.5 37.4 -2.2 27.3 1 53.4 7.1 59.6 10.4 10.3 50.2 5.6 65.2 3.9 3.9-0.5 6.8-0.8 8.6-0.9l1.8-0.1c47.6-2.3 60.1-8.1 63.2-11.4 6.7-6.9 13.7-25 17.4-44.9 3.8-20.9 2.6-35.7-0.6-39l0 0c-12.6-13.2-51.1-12.2-71.7-11.7 -5.3 0.1-9.8 0.2-13.1 0.2h-1.7C398.7 360 392.3 359.8 385.2 359.8z"/> <path class="component__icon__spinner--4L" d="M207.9 470.8c-18 0-41.6-1.6-47.7-9.8 -8.6-11.4-14.3-52.5-10.4-74.4 1.4-7.5 3.7-12.2 7.1-14.4 8-5.2 33.5-8.6 54.6-9.4 17-0.6 47.1-0.2 58.1 9.8 11 10.1 14.8 36.1 13.6 57.4 -0.4 7.7-2.2 26.3-9.7 31.7 -7 5.1-33.8 8.4-56.7 9C214.1 470.7 211.1 470.8 207.9 470.8zM221.7 368.5c-3.2 0-6.5 0.1-9.9 0.2 -25.5 1-46.2 5.1-51.6 8.5l0 0c-0.9 0.6-3 2.7-4.4 10.4 -3.7 20.4 1.5 59.5 9.3 69.7 3.2 4.2 20.4 8.1 51.7 7.2 27.3-0.8 48.9-4.7 53.3-7.9 3-2.2 6.4-11.4 7.3-27.2 1.1-19.9-2.6-44.3-11.7-52.7C259.6 371.5 243.6 368.5 221.7 368.5z"/> <path class="component__icon__spinner--4R" d="M387.4 470.8c-3.2 0-6.2-0.1-8.9-0.1 -22.9-0.6-49.7-3.9-56.7-9 -7.5-5.5-9.3-24-9.7-31.7 -1.2-21.3 2.6-47.3 13.6-57.4 10.9-10 41.1-10.4 58.1-9.8 21 0.8 46.5 4.3 54.6 9.4l0 0c3.4 2.2 5.8 6.9 7.1 14.4 4 21.9-1.8 63-10.4 74.4C428.9 469.1 405.4 470.8 387.4 470.8zM373.6 368.5c-21.9 0-38 3-43.9 8.4 -9.1 8.3-12.8 32.8-11.7 52.7 0.9 15.8 4.3 25 7.3 27.2 4.4 3.2 26 7.1 53.3 7.9 31.3 0.9 48.5-3 51.7-7.2 7.7-10.3 12.9-49.4 9.3-69.7 -1.4-7.8-3.6-9.9-4.4-10.4 -5.4-3.4-26.1-7.5-51.6-8.5C380.1 368.6 376.8 368.5 373.6 368.5z"/> <path class="component__icon__spinner--3L" d="M215.2 216.3v7c9.5 0 19.7 3.3 28.2 9 7 4.8 16.2 13.6 20.3 28.7 3.5 12.9 5.2 76.5 4.4 170 -0.7 80.6-2.8 150.4-3.9 156.7 -1.3 5.3-4.6 15.3-12.6 24 -10.5 11.3-25.8 17.1-45.6 17.1 -26.3 0-42.5-11.9-51.4-21.9 -10.2-11.5-16.6-27-16.6-40.6 0-30.4 6.2-283.2 10.8-300.1 4.7-17.3 25.4-37 61.3-42.3 1.6-0.2 3.3-0.4 5.1-0.4L215.2 216.3M215.2 216.3c-2.1 0-4.2 0.1-6.1 0.4 -40.5 6-62 28.9-67 47.4s-11 273.9-11 301.9c0 28 24 69.5 75 69.5s62.5-36 65-46.5c2.5-10.5 8.4-296.9-0.6-329.9C262.3 229.4 235.3 216.3 215.2 216.3L215.2 216.3z"/> <path class="component__icon__spinner--3R" d="M380.1 223.3c1.8 0 3.5 0.1 5.1 0.4 35.9 5.3 56.6 25.1 61.3 42.3 4.6 16.9 10.8 269.6 10.8 300.1 0 13.6-6.4 29.1-16.6 40.6 -8.9 10-25.1 21.9-51.4 21.9 -19.7 0-35.1-5.7-45.6-17.1 -8-8.7-11.4-18.7-12.6-24 -1.1-6.2-3.2-76-3.9-156.7 -0.8-93.5 0.9-157.1 4.4-170 4-14.9 13.3-23.8 20.3-28.5C360.3 226.6 370.6 223.3 380.1 223.3M380.1 216.3c-20.1 0-47.1 13-55.3 42.9 -9 33-3.1 319.4-0.6 329.9 2.5 10.5 14 46.5 65 46.5s75-41.5 75-69.5c0-28-6-283.4-11-301.9s-26.5-41.4-67-47.4C384.2 216.5 382.2 216.3 380.1 216.3L380.1 216.3z"/> <path class="component__icon__spinner--2L" d="M224.7 682.4c-2.7 0-4.4-0.2-4.5-0.3 -0.5-0.1-15-2.1-29.3-11.6 -13.4-8.9-29-26.3-27.9-58.4 0.5-13.9 0.9-40.5 1.4-74.1 0.8-52.6 1.8-124.5 4-187.3 2.6-74.9 6-120.6 10.7-139.6l0 0c3.1-12.9 19.8-50 54.9-51.8 15.3-0.8 27.7 8 35.9 25.4 5.7 12.1 7.3 24.2 7.5 25.2 7.4 50.7 9 358.4 0 416.3 -2.8 17.7-10.5 41-31.9 51.2C237.2 681.7 229.4 682.4 224.7 682.4zM188.8 213.5c-10.2 42-12.8 219-14.4 324.6 -0.5 33.7-0.9 60.4-1.4 74.4 -0.8 22 7.1 38.8 23.5 49.7 12.4 8.3 25 10 25.1 10 1.6 0.2 37.8 4.8 45.9-47.3 8.9-57.5 7.4-363.2 0-413.4v-0.1c-0.1-0.4-5.9-43.4-33-42C205 170.9 190.9 204.5 188.8 213.5L188.8 213.5z"/> <path class="component__icon__spinner--2R" d="M370.6 682.4c-4.7 0-12.5-0.7-20.8-4.7 -21.4-10.2-29.2-33.5-31.9-51.2 -9-57.9-7.4-365.7 0-416.4 0.1-1.1 1.8-13.2 7.5-25.2 8.2-17.4 20.6-26.2 35.9-25.5 35 1.8 51.8 38.8 54.9 51.7 10.4 43 13.1 220.8 14.6 326.9 0.5 33.7 0.9 60.2 1.4 74.1 1.2 32.1-14.5 49.4-27.9 58.4 -14.3 9.6-28.7 11.6-29.4 11.6C374.9 682.2 373.2 682.4 370.6 682.4zM359.5 169.4c-26.1 0-31.6 41.6-31.7 42v0.1c-7.4 50.2-8.9 355.9 0 413.4 3.5 22.3 12.3 37 26.3 43.8 10.1 4.8 19.4 3.6 19.5 3.6 2.1-0.3 50.5-7.5 48.7-59.8 -0.5-14-0.9-40.6-1.4-74.3 -1.6-105.8-4.2-282.7-14.4-324.7 -2.2-8.9-16.3-42.5-45.7-44C360.4 169.4 359.9 169.4 359.5 169.4z"/> <path class="component__icon__spinner--1L" d="M240.7 615.2c-16.7 0-37.3-8.2-48-44.1 -4.1-13.7-0.6-121.2 0.6-153.8 2.4-66.2 6.3-141.3 8.9-149.9 6.2-20.6 24-30.1 37.9-30.1 0.1 0 0.1 0 0.2 0 10.4 0 20.5 4.1 27.7 11.2 6.9 6.8 10.6 16 10.6 25.8 0 4.4 0 20-0.1 41.9 -0.1 74.8-0.3 230.4 0.1 254 0.5 29.4-10.1 43.3-34.3 44.9l0 0C243.1 615.1 241.9 615.2 240.7 615.2zM240.3 243.2c-0.1 0-0.1 0-0.2 0 -11.8 0.1-26.8 8.2-32.1 25.9 -2.1 6.9-6 73.5-8.6 148.4 -3 83.9-3.4 143.5-0.9 151.9 8.3 27.9 23.6 41.3 45.4 39.7l0 0c20.8-1.4 29.1-12.7 28.7-38.8 -0.4-23.8-0.2-179.4-0.1-254.1 0-21.9 0.1-37.4 0.1-41.9 0-8.2-3.2-15.8-8.9-21.5C257.6 246.6 249 243.2 240.3 243.2z"/> <path class="component__icon__spinner--1R" d="M354.6 615.2c-1.2 0-2.4 0-3.6-0.1l0 0c-24.2-1.7-34.8-15.5-34.3-44.9 0.4-23.7 0.2-179.3 0.1-254 0-21.9-0.1-37.5-0.1-41.9 0-9.8 3.8-18.9 10.6-25.8 7.2-7.2 17.3-11.2 27.7-11.2 0.1 0 0.1 0 0.2 0 13.9 0.1 31.7 9.5 37.9 30.1 2.6 8.6 6.5 83.7 8.9 149.9 1.2 32.6 4.7 140.1 0.6 153.8C391.9 606.9 371.3 615.2 354.6 615.2zM351.4 609.1c21.9 1.5 37.1-11.9 45.4-39.7 2.5-8.4 2.2-68.1-0.8-151.9 -2.7-74.9-6.6-141.5-8.6-148.4 -5.4-17.7-20.5-25.9-32.2-25.9 -8.9 0-17.5 3.4-23.6 9.5 -5.7 5.7-8.9 13.3-8.9 21.5 0 4.4 0 20 0.1 41.9 0.1 74.8 0.3 230.4-0.1 254.1C322.2 596.4 330.6 607.6 351.4 609.1L351.4 609.1z"/> </svg>
  15. I read through as much as I can find here and test with your pens by copying ma path to your example (https://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/, and there my path works!), but I cannot find my own problem with this animation. The circle path fades in, but the animation is doing nothing... I am still very new to SVG and also to GSAP, but I did read all the docs already... but I am still in the dark somehow... any hint would be most welcome! Thank you in advance! Best regards, Robert
  16. Hi, I saw a tutorial where the tutor animates elements from inside a mask definition to make his desired effects, so I thought that I could use that technique to make a similar animation for a different effect, but somehow it doesn't work for me. In my picture there is a circle that is defined inside the mask definition and it is meant to be animated but it doesn't move, however, if the circle is outside of the mask tags it can be animated. So the question is that is there a way to animate that circle defined inside the mask and if it is possible, what do I need to do to make it work?
  17. Joostan

    strokeDashoffset

    Good morning people, Could somebody explain why the 'strokeDashoffset' in the following pen will not animate? http://codepen.io/Joostan-33/pen/kkYEpk Inspecting the element in the DOM and manually manipulating the 'stroke-dashoffet' i can easily animate property. images attached. Thanks
  18. How to ensure that the snake-like animation in https://codepen.io/TobiReif/pen/b7809c58663ddac3572f5594ffc4f5fe/ is even? Each column of dots should move up with ease-in-and-ease-out (eg sine) and should move back in the same way: slow upwards, fast upwards, slow upwards, then slow downwards, fast downwards, slow downwards; loop. The current animation is roughly what I want, but it seems to be faster at the top and slower at the bottom. Each column of dots seems to jump up and down, resting at the bottom only. I had no luck using repeatDelay, and I think a clean solution would not involve repeatDelay. Instead I need something like "sineAnimationUp;reverse;loop" or simply "sineWaveAnimation" == forth and back exactly like a sine wave.
  19. Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: https://codepen.io/Creedplay/pen/oLRPjY Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675 Thanks in advance.
  20. Hey Guys, I've created a bunch of ads which have SVG tags with DisplacementMap to give the illusion of moving 'northern lights' This has been fine for most adservers but apparently DFP don't support SVG tags. The other workaround is to create background image steps, but i fear this will create quite a large ad. I could create a video but im pretty much sure that won't be accepted. GIF will also be to large. Any ideas? Thanks!
  21. Hi, I'm having trouble figuring out how to properly resize and rotate and svg element. Any suggestions to make this work? Rotating works well, but the scaling resets the rotation and the math is way off. A bonus would be if the handles could move with the resized element but not rotate or resize themselves. Just the red B should be transformed. Thanks!
  22. Chrome is not animating SVG > clipPath > text The code is working perfectly in Firefox but not in chrome(and IE but I don't care about IE). I've only been playing with SVG and GSAP for a few days now. Am I doing something wrong? http://codepen.io/anon/pen/VjgvXQ chrome: Version 52.0.2743.116 m thanks.
  23. I'm currently using GSAP to create a few banners with SVG shapes (text from Illustrator outline since I can't get Webfonts for these). They work and look fine on my machine, but when tested on a PC in Chrome, there is a small issue where the moving SVG element leaves a sort of "trail" graphically, but only when viewed at 100%. I've attached a mocked up version of the issue (I tried getting the user to provide a zoomed in screenshot but she says the issue vanished when zoomed in). Has anyone encountered this when animating SVG elements? I am imagining it is probably a hardware issue.
  24. First off, I love this library and have been using it forever! Just took the plunge on a membership to support your efforts. Now on to the problem. I'm trying to animate the offset values of a gradient but I'm not able to for some reason? I successfully used the same method to animate stopColor, but no dice on offset. I've tried using a few methods but the example is using cycle. What am I doing wrong here? Please see the codepen below: http://codepen.io/Jerbach/pen/PzBXxa
  25. Hello, This is my first post, and I'm hoping to continue learning more and more about GSAP and all its features. I'm correctly working on recreating a dribbble shot I saw (https://dribbble.com/shots/2766513-Ep-07-The-Hound). They created a gif and I'm trying to recreate the movement using SVG and GSAP. I have a couple of questions... 1. I attempted to do 2 different things, and I was curious how you guys would approach this animation. When I altered the opacity It kept "blinking", I solved this with altering the CSS to display none/block. Would this be the best approach or is there a different way to solve the "blinking" with altering the opacity? 2. The transition or timing is not fluid at all, would you be able to help me understand how to adjust the timing to make it look more fluid. I've had this same issue with other animations where it just looks choppy. What's the best approach so that transitions look more fluid and seamless? code: http://codepen.io/vaarellano/pen/bZjqmO Thanks, Victor
×