Jump to content
Search Community

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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


X


CodePen


Company Website


other


Location


Interests

  1. Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!
  2. Hi there, I'm playing with the TweenMax API and I encounter some difficulties. I aim to animate a full svg. I use a basic Tween for test puprose TweenMax.to($('#' + 'front_side_down'), 1, { opacity: 1, display: 'inline' }) When the SVG does not contain much nodes, it runs smoothly and nicely. But when I hit more than 1000 groups node of svg path the animation got choppy. I wonder why it influence anything, as in any case we only target one element... Any help would be much appreciate ! Thanks ! P.S : I'm talking about a 3.5mo SVG file
  3. I've noticed that GSAP applies transform properties to SVG elements via the inline style attribute instead of the native SVG transform attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform. This tends to be a browser compatibility issue, especially with IE. I cross referenced Velocity JS, and it looks like there's some feature detection built in that deals with this issue. Am I missing something? Or does GSAP have a method of accomplishing this easily? I should note that I already have some functional code, but it's a lot more verbose than I'd like it to be; onUpdate functions running after every tween. To be sure I'm clear, I want: transform="translate(40, 60)" or transform="matrix(1,2,3,4,5,6)" instead of style="transform: matrix(1, 0, 0, 1, -45, 75)" (ignore number values) Thanks for the help
  4. dxc

    SVG Animations in IE

    Oh how I hate IE. I have this working in all browsers, including mobile iOS. The only place it doesn't work is in ie. Everything shows up as it should, but none of the movements happen. I'm not even sure where to start. Thanks for your help! Here's the non-codepen version if that helps: http://aprendagames.com/stock/error_pages_robot/headlessRobot/?errorcode=404
  5. I'm able to animate the entire SVG. I'm also able to call and modify an element within the SVG (rect02), but I can't seem to animate rect01. Help would be much appreciated!
  6. Given an SVG image with two circles, #innerCircle and #outerCircle, and other elements I don't care as much about - I want to have an easy way to animate the arc of #outerCicle with maybe easein. Tried snap.svg but it doesn't animate well (which is a point of contention on SO), wanted to try Raphael but it doesn't handle existing SVGs, looked up svgjs but it is pending svg adoption in the RC milestones. (function () { var ocx = 0, ocy = 0, oca = 0; function describeArc(x, y, radius, startAngle, endAngle) { var start = polarToCartesian(x, y, radius, endAngle); var end = polarToCartesian(x, y, radius, startAngle); var arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; var d = ["M", start.x, start.y, "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "L", x, y, "Z"].join(" "); return d; } function polarToCartesian(centerX, centerY, radius, angleInDegrees) { var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; } Polymer('character-hitpoints', { maxHealth: 0, maxHealthChanged: function () { // NotImplemented }, increment: function () { // NotImplemented }, ready: function () { var character = this.character; var h = this.$.hpRing; var t = {}; // load the svg fragment into the element Snap.load("hpcircle.svg", function (f) { var s = Snap(h); s.append(f); var n = s.select('#outerRing').node; var np = n.pathSegList[2]; var a = n.pathSegList[1]; ocx = np.x; ocy = np.y; oca = a.r1; t = s.select('#characterName'); t.node.textContent = character; t.node.x = ocx + 10; t.node.y = ocy; }) }, animRing: function (divRing) { var hpRing = Snap(divRing.toElement.shadowRoot.querySelector('#svg2')); var max = Math.floor(Math.random() * 359 + 1) Snap.animate(0, max, function (val) { hpRing.select('#outerRing').attr({ 'd': describeArc(ocx, ocy, oca, 0, max) }); }, 2000, mina.bounce, function (val) { console.log('Animate done'); }); } }); })(); The last bit, animRing, changes the arc, but doesn't actually animate with a bounce, it just flips to the new size. Any advice is welcome, I've got a dent where I've been banging my head against my desk.
  7. So I have this idea to do an landing animation for my new website with svg animation. Where I'll have multiple parallax cloud layers animating. However, I am having issues getting the idea to work in all browsers, and can't even get it to work at all in CodePen for some reason. There has to be an easier way to do this kind of animation. I'm just looking to get pointed in the right direction here as I am getting frustrated trying to get this to work. The animation works in Chrome, but Firefox reports the initial position of the clouds and never updates for some reason no matter what I've tried with jQuery anyways. http://timherbert.net/sandbox/ I also accidently linked the private codepen. Here is the public one: http://codepen.io/timherbert/pen/vzuDr/
  8. I know in IE, you cannot transform svg child elements normally with the style attribute so you need to fallback to updating the transform attribute on the element within the svg. TweenMax.to('#circle', 1, {scaleX : 1, onUpdate: scaleXie, onUpdateParams: ["{self}"]}); function scaleXie(t){ if(!Modernizr.smil){ //fallback for IE. $(t.target.selector).attr('transform', 'matrix(' + t.target[0]._gsTransform.scaleX + ', 0, 0, 1, 0,0)'); } } This works but is there a more elegant / global way to have TweenMax update the transform attribute on svg elements when the browser is IE ? I have many of these transform tweens and would like to know if there is a better way at polyfilling IE.
  9. I'm able to animate two SVGs, each with a class of 'widget', upon loading the page. But when I add event listeners for mouse events to animate them on rollover, nothing happens when I mouse over or out of the SVG objects. Do SVGs have to be treated differently than other images for the event listeners to work?
  10. Here's an odd one. Rotation for SVG elements doesn't seem to work in Firefox. Does anyone know if there's a workaround? http://codepen.io/Mode7James/pen/mjxtC
  11. I am trying to use Draggable to rotate a <g> inside some inline SVG. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/utils/Draggable.min.js"></script> ... TweenLite.set(".group1", {transformOrigin:"50% 50%"}) Draggable.create(".group1", {type: "rotation", throwProps: true }); This will allow the element to be rotated by dragging, but none of the momentum works and the rotation is incorrect in that the movement shifts from clockwise to counter clockwise mid-drag.
  12. First of all, I'm long time fan. Greensock is great! I've been using GSAP in one of my projects as a unified platform for animating both SVG and HTML. Up until recently, I'd been using Raphael as my SVG library. GSAP's RaphaelPlugin was a nice abstraction from the messy matrix math underlying transitions between transform states. I got spoiled using scaleX, scaleY, tx, ty, localPivot, etc. Recently, I switched fron Raphael to D3, both for the data-driven functionality but also for more direct access/control over my SVG elements. (D3 focuses on transformation of SVG, whereas Raphael introduces it's own, special representations.) The change has been refreshing, but I miss the added functionality of RaphaelPlugin--especially for times when I simply want to spin and scale SVG elements using transform without thinking about interpolation, etc. [i'm not exclusively making graphs, but also flying spaceships around, etc.] So I went back and looked at RaphaelPlugin, and it strikes me that you're very close to having a general purpose, library-agnostic SVG plug-in for GSAP. The very few Raphael-specific methods (e.g., matrix, bbox) in RaphaelPlugin are mirrored in the SVG spec (e.g., getCTM, getBBox). With a little hacking, I got a prototype (mostly) working fairly quickly. Is there any interest in the community for such a thing? Have GSAP staff thought about this?
  13. I am attempting to animate opacities of several elements and experiencing some performance issues. Some preface... I'm using Snap.svg and have ported the RaphaelPlugin for Snap in my fork of GreenSock (https://github.com/anthonygreco/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js) so generally speaking if anyone has experience with the RaphaelPlugin, any info you may have on the matter should be at least mostly relevant, though anyone with experience with GSAP may have just as valuable input. Now for the problem at hand. I have roughly 1500 different path elements on a page in which no more than 400+/- of them are animated at any one point and only animating their opacity via staggerTo shows the other simple animations choppy. The most interesting part is that the 400 or so path elements don't seem to be choppy, but the simple animation is. My first question is simple; I may have more afterward but for now.... are there any idiosyncrasies to staggerTo that I may not be aware of from a performance perspective? Eventually, I'll probably rebuild what I've done in a JSFiddle to get more specific circumstances available for assistance, but right now I'm more interested in the overall larger picture and any optimization guidelines anyone may have.
  14. Hi! best wishes for ya'll green(s)®ockers! Good health & what floats your boat! enjoy!! my question: Is it possible to define a gradient of lets say 4 color stops in jquery then loop through an array of colors and one of those array items is that gradient... the rest is a single color. Here is what I have. (it might look dirty... just testing ) The rainbow_array in the color array obviously doesn't work, its just to illustrate what i am after. Many thanks for some insight! var rainbow_array = Array ("e21111", "11e2c2", "a011e2"); var color_array = Array("#ffcc00",rainbow_array, "#e7353a", "#b62727", "#eeeeee", "#d5d5d5", "#0c0c0c"); $('#clickable_thing').click(function(event) { var parent = $(this).parent(); parent = parent.find("rect"); var fillcolor = $(parent).css('fill'); console.log(rgb2hex(fillcolor)); TweenMax.to(parent,.4,{fill: color_array[i]}); if(rgb2hex(fillcolor) == color_array[i]) { if (i < color_array.length-1) { i++; if (i == 1) { /*do gradient*/ } else { TweenMax.to(parent,.4,{fill: color_array[i]}); } } else { i = 0; TweenMax.to(parent,.4,{fill: color_array[i]}); } } });
  15. I'm trying to animate a <PATH> within an <SVG> with transform. With the help of another post in the forums, I've managed to get the transform working, but I can't find a way to change the transform origin (css transform-origin doesn't work). It always performs the transform relative to the top left. Here's a basic demo I'm working with at the moment: http://jsbin.com/eyaqOLIY/1/edit?html,js,output In the final version, I will be manipulating an SVG that is created by another javascript library, so I can't change the HTML output much --- I could add classes and such, but I can't go wrapping things in <G> elements, etc. The final will also have multiple paths within a single <SVG>, that I need to animate seperately, so I can't apply the animation to the SVG. I need to animate the <PATH>. Any idea how I can animate the path relative to its center rather than the top left (needs to be compatible with IE9 and FF10)? Thanks! Matt
  16. Rob

    SVGJS Plugin

    Hey All, I have been working with svg.js a lot recently. I noticed you guys have a raphael plugin, which is brilliant. svg.js and Raphael are very similar however svg.js has the added bonus of being able to work with masks and clipping paths. I have created my own plugin which is basically your Raphael plugin with some modifications, it works nicely for transforming svgjs objects, the only thing it doesn't allow you to do alter the transformation origin/anchor, im currently trying to work this out because svg.js doesn't have native support for this unfortunately. If you're interested at all I've dropped it onto a gist All the best, Rob
  17. Hello people! I was wondering if anyone has experience using Greensock to tween elements in inline SVG and getting it to work in IE (9 and up)? I'm creating a site with a lot of animations going on, and the graphics are pretty much exclusively in SVG. Most of the time, I'm wrapping inline SVG in HTML elements and then animating those, but in some instances, I really need to animate elements within the inline SVG document (e.g. moving things inside of a clip-path). Specifically (so far), I've wanted to move stuff by animating x/y. This works great in Chrome, Firefox, Safari (iOS and desktop), but fails in IE. It's really hard to debug why it's not working, so I thought I'd ask around if anyone has faced the same issues, or had ideas on why this is. No code sample at this point, but will try to provide one if needed.
  18. Hey Guys, I am still new to GSAP animation, and i need some help. I am implementing a timeline using greesock js which handles a presentation of different SVG images mainly made up of simple lines, circles and paths. What is want to achieve is the animation of these SVGs while to timeline is being moved. As far as the timeline implementation goes, all is well. But when it comes to animating the svg the way i want i am reaching a road block. I can animate the scaling, width and opacity with no problems. The code is as such: TimeLine.from($('#Shape2 polygon'), 2, { scale: 0, onStart: function () { //Dont mind the variables mainTimeline.timeScale(NormalTimeScale); } }, timeShift) What i want to achieve is the drawing effect of the lines circles etc... As the user moved the timeline scroll bar, the vector graphics should be drawn and of course the reverse effect should be obvious. I am mainly trying to achieve this with stroke-dashoffset and stroke-dasharray but i cannot alter these properties even after i included the AttrPlugin. This is what i am trying: Timeline.from($('#Shape2 line'), 1, { atrr: { 'stroke-dasharray': '20px' }}, timeShift + 1) Please note that these are just example blocks of code. Can you guys help me with this please?
  19. Hi everybody, First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English). i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation. The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be a wasted time I think. So, ive searched on the web but I found nothing that I can use. I work with Adode Design Premium CS5, so i can't use CreateJS as plugin for Flash and I haven't Edge Animate. I tried Swiffy but It doesn't seems to work. I tried to do something like this in Flash: function createCSS () { for (var i:int=0; i<numChildren-1; i++) { var mc:MovieClip = getChildAt(i) as MovieClip; tabMC[i] = mc; trace ('#'+mc.name+'{'); trace ('position:absolute;'); trace ('x:'+mc.x+';'); trace ('y:'+mc.y+';'); trace ('}'); trace (''); } } wich display a "potential" CSS style-sheets of all the elements but if I want it works, i will have to export each element in SVG with Illustrator with the same name used by Flash, and that also seems to be a wasted time. Is there another solution you see to do this ? I hope Ive been clear, my english is so bad. Thank you in advance for whatever help you can give me. Notice that the animation size is very low (52ko) i want to keep this size as lower as possible, even in HTML5. ps: attached file contains the .fla ATRT_anim01.zip
  20. Hi, I found a great library for loading external SVG graphics: http://code.google.c...svgrendererlib/ It's very simple, using something like this code: import com.lorentz.SVG.display.SVGDocument; import com.lorentz.processing.ProcessExecutor; ProcessExecutor.instance.initialize(stage); ProcessExecutor.instance.percentFrameProcessingTime = 0.9; var svgDocument:SVGDocument = new SVGDocument(); svgdocument.load('graphics/coloredtoucan.svg'); addChild(svgDocument); I was looking at loading it using LoaderMax, but couldn't get anywhere with SWFLoader and ImageLoader. Any suggestions no how I might achieve this?
  21. I am using draggable on a div containing svg elements If I dont use draggable and scale the div via:- var i = $('#chart'); TweenLite.to(i, 2, {scale:4}); The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors. However if I enable draggable via:- var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window}); and then zoom the SVG element become fuzzy as though they were scaled pixels. This happens even if I disable draggable before scaling Any ideas why this might be? Thanks - Dean Update: Scale without Draggable uses -webkit-transform: matrix(... Scale with Draggable uses -webkit-transform: matrix3d(... using Safari and Chrome on Mac - not a problem on Firefox (not using webkit) Ah: Putting force3D:false as in: TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false}); Is their a reason for the problem with matrix3d and scale on webkit? solves the problem
  22. Hi, is there any way to animate along SVG paths already? If not, can you recommend any tool that helps me get the bezier data from SVG, illustrator (or other) paths, so I can use them with GSAP? Thanks in advance
  23. Simple HTML5 example that tweens embedded SVG graphics. tween_svg_example.zip <embed id="svgBoard" src="board.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleRight" src="people_right.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleLeft" src="people_left.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgText" src="text.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <script> function $(id){ return document.getElementById(id); } TweenMax.from( $('svgBoard'), 2, { delay:1, css:{top:-300}, ease:Expo.easeInOut } ); TweenMax.from( $('svgPeopleRight'), 1, { delay:2, css:{autoAlpha:0} } ); TweenMax.from( $('svgPeopleLeft'), 2, { delay:3, css:{left:-350}, ease:Strong.easeOut } ); TweenMax.from( $('svgText'), 2, { delay:5, css:{autoAlpha:0} } ); </script>
  24. Is it possible to load vector SVG graphics externally?
×
×
  • Create New...