Search the Community
Showing results for tags 'svg'.
Found 608 results
-
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.
-
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?
-
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
-
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?
-
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
-
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
-
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>
-
Is it possible to load vector SVG graphics externally?
