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 everyone! This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here. I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle). My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step? The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example. Does anyone have any ideas of how to solve this problem? Thanks!
  2. Hi! I've built an animation with greensock and I checked the repaint in Chrome (and in Firefox too). And there are. Is it okay or should I optimize my animation somehow? Thanks, Soma https://codepen.io/szsoma/pen/vZgxmq
  3. Hi, Does anyone know of a working example or a pen using the GSAP SVGdraw plugin inside of Pixi.js canvas setup ? The goal is to draw ( animate ) svg paths of an svg redrawn inside of Canvas. ( svg inside the canvas is setup as Pixi graphics object. ) Thanks.
  4. Hello, I'm trying to make an animation using a SVG file as framework of a embed video. I don't know how to make rect and paths to animate, I've tried everything. The animation should be from the center of the top line to the left and right and while advancing paint the path and ends in the central part of the bottom line. The final animation is not important, for now, but the svg does not move at all in codepen.
  5. Hi, I'm using SVG to create buttons in a different shape rather than the usual rectangular button. The problem is (at least the one that I'm working at the moment) is that the animation, whilst it works as intended, doesn't seem to run at the same rate across different browsers. Firefox, Edge and IE 11 run fine, as I like it to, Chrome and Opera on the other hand have a weird slowdown look to it. Unfortunately, whilst I can use the :hover selector on the elements and do it that way, which grants me consistency, in order to have it so the hovered button stays on top of the rest I have to re-order the SVG elements to have it on the bottom, doing so seems to interrupt the :hover transition in some way on Firefox, Edge and IE 11 but works fine on Chrome and Opera. There may be an error in how I've set it up in general, but it appears to be good enough. Any help will be appreciated Thanks
  6. Hi everyone, I'm trying to animate some objects (arrow heads) along the path of the arrow itself. CodePen attached. I'm attempting to use the BezierPlugin to achieve this, but transforms are being applied to the position of the arrow heads in a strange way. I'm sure there is a straightforward solution to this, but I can't seem to figure it out! Many thanks for any help provided, as always!
  7. Hello there! First of all, thank so much for such an amazing library. I can't stop recommending it. We integrated gsap on our project in order to handle better the timings and make our code much easier and performant. I will share the temporary url with you so you can take a look: http://lab.pre.rtve.es/el-cuento/ We are getting good results on desktop, however, not so much on mobile devices. It gets all laggy sometimes and the animations start to suffer delays. How could I improve performance for mobile devices? I have been trying to set the framerate on Tweenmax ticker to 60fps, I tried force3D:true on all our translate/rotate/scale animations but still cant see a proper improvement... Do you think I made a bad choice and this is too many animations for a mobile device? We are only animating our character, doing translates, rotations, scale, and svg morphing using Snap.svg. We have a function that takes an array of svg groups (parts of our character) and goes one by one throwing snap svg morphs in order to make, for example, the whole mouth move from one type to another. Thank you very much for your help, Ricardo
  8. Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
  9. Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
  10. Hi GreenSock People, I've been playing around with GreenSock for a little while and I should note that I'm more of a Graphic Designer than a Digital designer, but I'm getting there. So, I need to complete a project that animates an SVG, similar to Petr Tichy's tutorial "SVG lab" https://ihatetomatoes.net/get-greensock-workshop/ . But I would like to incorporate the user interaction of this http://www.because-recollection.com/laurent-garnier, which is in the showcase on the GSL site. It's the 'cog' animation. So the longer you hold click the faster the timeline plays. I haven't started the job yet, but just wanted to know if there was a way to tackle this. Any help, would be amazing! Thanks. John
  11. Hello! I am trying (hoping) to achieve SVG tulips to look like they are gently swaying from left to right in a type of 'evening breeze'. The way I have thought about it, is to have two outlines for each tulip and the morph between these two oulines back and forth to give the idea that its slightly moving. Erm... So looking at my CodePen, the result ended up being faaaaarrr from that... I thought trying to change the index point might help. But its still rather messy. Another issue could be that the outlines are too complex different. I am now not even sure if morphing is the way to go. I did have a close look at the GSAP WaveSVG function (the one for the morphing green cape), bit that is way to complex for me. I also found a previous article in your forum: This CodePen from the article is really lovely. It is this effect I was thinking about. But not sure how to apply that to SVG tulips... Any ideas? Is it possible? Do I need to work on the SVG shapes more? Thank you in advance.
  12. Hello GSAPers, I would like to know if there is an alternative to make SVG Draw work within Adobe Edge Animate, I made a search inside the forum I found this file but it is not working, I believe it is because the EdgeCommons has been interrupted. Can you upgrade that works from this file? GSAP SVG DRAWING AND EDGE ANIMATE.zip
  13. Hi all, I'm new with GreenSock and quite happy with I've done until now with it! I've to do a animation through a path. All seems right up to here. But it needs to be responsive. I mean, as the path adapts to the width of the screen, the animation should also adapt. Is it possible to do this with GS? Any help will be really apreciated. Thanks!
  14. I have an image: and I want to fill the missing part of it. The best way I found was to convert the missing part of the image to SVG and then start filling the missing part using tweenmax. For reference, I have added the animation for filling the svg but it is not animating like what I need i.e. it is increasing from center point. I need to blend the animation like the image missing area is filling from one end. I can change the way of animating if there is any other way we can fill the missing part of the image? I have also tried other solution of fill mode but smooth transition is not happening in it.
  15. 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.
  16. Hi all, Hoping someone can help me out with an issue I'm having with the animated SVGs in my animation not displaying in IE. Bascially, there's one large SVG that takes up the whole background and then 3 smaller SVGs that are animated next to standard text. I've worked through few suggestions via these forums without any luck so far. All fine in other browsers, but with with IE I'm not even able to view the SVGs to even work out if they're animating correctly or not. Here's the codepen link: http://codepen.io/lachlants/pen/bed88f588e7c90bd4efb5df6e80da438 Further to this, the performance seems to be a bit laggy. Especially on mobile. Love some pointers if someone can help out. Thanks in advance, Lachlan
  17. Hello! I have some issue with show elements. I fill svg line with help property stroke: function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength); $el.css("stroke-dashoffset", lineLength); } But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints. My code: // Init ScrollMagic var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, tweenChanges: true, duration: ScreenHeight } }); // Create scene $("section").each(function(){ new ScrollMagic.Scene({ triggerElement: this }) .setPin(this) .addTo(ctrl); }); var processLine = '#process-line'; // prepare SVG pathPrepare($(processLine)); var s4Tween = new TimelineMax(); s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); // Create scene var scene4 = new ScrollMagic.Scene({ triggerElement: "#section3" }) .setTween(s4Tween) .addIndicators({name: "1 (duration: svg)"}) .addTo(ctrl);
  18. Hello everyone ! I have some very fun and complex thing to do, and any help will be much appreciated ! I'm trying to move SVG group along the path, scale it down, and then move elements of that group along different path. But when I scale down the parent element I also scale the motion path of the child element, and I'm wondering what I'm doing wrong here? Or, maybe my approach is just totally bad. That is what I have https://codepen.io/Dikus/pen/EmaqbV And that is what I would like to achieve - of course the group should scale down, but the path should be the same https://codepen.io/Dikus/pen/EmaqLP?editors=1010 Final SVG - maybe this will help you to imagine what I would love to achieve - the last movement of the purple particle, should move along the purple stroke http://patryksmakosz.com/dev/spectrometer/ So, my question is - is it possible to scale down the main element, and do not scale the path with it? Wish you all the best ! PS pathDataToBezier just rocks! Probably I miss something big here
  19. 0down votefavorite I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in image 1. Needed_Picture Current_Picture My gradient and stroke definitions are as follows : </svg> script : ` svgPath.setAttribute("stroke-width", "10"); });` 0down votefavorite I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in the image named as Current. My gradient and stroke definitions are as follows : </svg> script : ` svgPath.setAttribute("stroke-width", "10"); });`
  20. Mat_

    Liquid shape

    Hi everyone, I'm totally new to greensock and I have some questions. I'd like to know if GS is the tool I need to realize a "simple" animation. The idea is to animate a simple shape, like this one : http://codepen.io/Mat_/pen/mWNpBo to make it wave a little. Nothing too fancy. If it is, can you point me where to start please ? Thanks a lot !!! Best regards, Mat
  21. New to GSAP, sorry if I'm missing something obvious, but I'm having a hard time understanding tween transformations. Please look at the codepen. I have three squares of dimension 10 at origin (10,10). Blue has been translated x+10 then scaled to half. Red has been scaled to half, then translated x+10. The black square I transformed using TweenMax.to() with x=10, scale=0.5 and it animates to a completely different location than the blue or red squares. I would expect it to either scale then transform, or vice versa. How would you explain GSAP g tweening in relation to basic SVG transformations?
  22. Hello great almighty GSAP forum, here I am with another question I'm having. Goal create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts Got most parts working, however there're a few visual things I just can't figure out. I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg> Help needed I'd like to know how to make the image's transform origin to the tip or tail of the arrow how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right. I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data. Question outside of this topic Why isn't <image> tag visible on Safari, let alone IE?? The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari. Added on 19th of April To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg; Thanks a lot!
  23. Hi there, I have the following SVG path data that I wish to use as a CustomEase. However, I think that CustomEase might not be properly normalizing this path: M16,350C17.6667,361.8333,18.2157,421,26,421 When pasted into the Ease Visualizer, this is the result: This SVG path data was generated by my new ae-ease-to-gsap-customease script, so it's possible that my script just hasn't generated the correct SVG path data. However, it certainly looks correct, which is why I'm currently suspecting that this might be an issue in CustomEase. Thanks for your time, Alex EDIT: For additional context, here's what this curve looks like in AfterEffects:
  24. TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand. On this example, The things that don't make sense to me. 1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point. This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point? 2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1... 3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!
  25. Hello guys, GSAP newbie here, hope someone can tell me what I am doing wrong. When I define scaleX value in transform attribute of SVG <g> it doesn't seem to be recognised by GSAP. Only when I explicitly set scaleX (line 2 in JS) does the tween work as intended. Translate values seem to be recognised just fine. http://codepen.io/hrvojesimic/pen/XMybJe?editors=1010
×