Search the Community

Showing results for tags 'svg'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 445 results

  1. swampthang

    Stacking Context Issue

    Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
  2. tganyan

    draw dashed path svg

    So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.
  3. I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).
  4. Dear GSAP comrades, Why do I get for some HOSTED DrawSVG animations from codepen 1 FPS when using CHROME on Mobile? They work fully FINE ON FF but just not on CHROME! How can this be? Only on Codepen it runs also well on mobile. Can someone solve me the riddle? Thanks for any suggestions, Mat
  5. Alright Guys, I have a little challenge / question for you. I really want to be able to get SVG path d attribute data into a format that BezierPlugin can use. So given this string M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93, I'd want either an array of all the x/y values of all the anchor and control points like [0,0,0,0,14,184,157,184,157,184,157,86,157,86,157,86,330,86,330,86,330,86,435,83,435,179] or an array of point objects (which ultimately would get passed to BezierPlugin) [{x:0, y:0},{x:0, y:0},{x:14, y:184},{x:157, y:184},{x:157, y:184},{x:157, y:86},{x:157, y:86},{x:157, y:86},{x:330, y:86},{x:330, y:86},{x:330, y:86},{x:435, y:83},{x:435, y:179}] The end goal is draw a continuous path in Illustrator, smack svg output into an html page, use the svg path for a Bezier tween. This video explains all this in glorious detail: Does raphael, or snapSVG or any other library offer a convenient conversion method? It seems that since the same curves can be represented each way it should be easy to convert 1 format to the other, right? I'm not looking to have a robust tool built that analyzes svgs and builds animations automatically, just a function that I can do convertPath(dPath) { ... //turn dPath string into an Array of anchor and control points return BezierPointData } //usage var bezierAnchorAndControlPoints = convertPath("M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93"); Any help is greatly appreciated. Carl p.s: This mission was greatly inspired by Chris Gannon's DrawScript converter: http://gannon.tv/drawscript-to-gsap/ and I'd like to publicly thank Rodrigo for helping me get a good leap into Raphael.
  6. Hi, I have an interesting(for me) issue I couldn't figure out. The code performs as I expect it to, setting the slider initial position depending on value of "current_value" variable, but only if I don't set the SVG Viewbox with Snap, on document ready. On the Code pen, you can remove that part at the beginning of $(document).ready and the slider sets the initial position correct. If the ViewBox is set, then the slider sets itself on some weird position I couldn't figure out. Mostly it goes out of bounds on the right, depending on the screen size. Try to view same code pen full screen. -> this I'm sorry if the codepen is messy, I tried clearing it out as much as I could. It is imperative for me to have the viewbox set, for resizing and centering the whole SVG. I feel like I need to tell Greensock that the view box has changed with Snap or something like that. Help? What did I miss? Thanks One below is working as expected, only this was removed on load ////remove below var svg = Snap('#svg'); svg.attr({ viewBox: "0 0 1280 720", width: "100%", height: "100%" }); //////////remove to here This one setting the initial position of the slider wrong:
  7. peacepostman

    SVG wave animation

    Hello, I've adapted an existant codepen to a jquery plugin in order to animate a svg into a random wave effect. I managed to use tweenMax in order to smooth the animation but i dont know if i've done that properly or if something can be improved or re-writed in a more clever way. Feel free to copy the jquery plugin if you need it Best regards,
  8. bdrtsky

    Why it's not morphing properly?

    Hi! Trying to figure out morphing thing. I made a circle in Illustrator, turned it to the path, then I also made a blob from this circle (with the same 4 anchors). Now I am trying to morph `path` one in another and having this bugs: I am not sure why this happening? How to morph this 2 shapes (w\out using MorphSVG right now, I need to figure this out first).
  9. Inspect the codepen preview window to see the values on the svg. I've tried exporting from Illustrator and from Figma (using SVOMG), but no difference in the result. Anyone an idea how to fix this? the values: element.style { stroke-dashoffset: -1; stroke-dasharray: 1e-05px, 11px; }
  10. Recordmr

    SVG to move with multiple buttons

    Hi, I am trying to use timelines to animate an svg element to slide to different points. When a button is clicked I need it to slide to a certain place on the x axis, then when another button is clicked, I need the element to slide from where it is to the x value associated with the next button pressed. If you know anything about guitar, I will put it this way: I want to display root notes (the red dots) and I need them to change position when a user clicks on the corresponding button. I have to do this for the 12 Major Keys. For example, the key of A starts on fret 5, so when the A button is clicked, the red dots should always move to that position no matter where it is. It is not so troublesome when only doing two keys but when there are multiple buttons, I'm not sure how to set it up. I'm sure I am way off....should I be using If Then conditions? Something else? Thanks for your help
  11. kgrondin

    Zoom lag SVG with expoScaleEase

    Hi there, I can't put any demo for example but i will try to explain as much as possible. I'm working on a "map" in SVG where i will have some interactive elements. In my interface, i make a button to zoom up and another to zoom down. I have limited the maximum and minimum zoom possible. Here my function that is making the zoom : TweenMax.fromTo(element, 0.3, { scale:previousScale }, { scale:currentScale, immediateRender:false, ease:ExpoScaleEase.config(previousScale, currentScale, Power0.easeNone), onUpdate:update}); This is in a function that determine the "previousScale" and "currentScale" to do the work. The update variable in my onUpdate paramater is : var update = function () { elementToMove[0].update(true); }; Where "elementToMove" is my draggable object that i have created. My problem : I'm not sure if it's because i have a lot of layers on my SVG, but when i'm zooming, it's lagging a lot. Anyway to keep my big SVG and zoom normaly, without lagging?
  12. Hi, I am loading my SVG file externally in an object tag because I wish to use gzip compression for my SVG. Because my SVG is now loaded separately, I can not select the elements inside the SVG with the default Greensock selector. https://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?do=findComment&comment=45132 I have tried this solution, but I don't wish to wrap doc.getElementById('') around all of my selectors instead of the default Greensock ' ' selector. Is there a way to modify the TweenMax.selector so my selectors will be referencing that document? Thank you.
  13. Hello all, I have an SVG that looks like this: <svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="-150 -5 76 69" height="76" width="400"> <path id="searchCircle" d="M56.5 29c0 14.64-11.86 26.5-26.5 26.5S3.5 43.64 3.5 29 15.36 2.5 30 2.5 56.5 14.36 56.5 29z" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" /> <path id="searchBox" fill="none" stroke="#fff" stroke-width="3.176" stroke-linecap="round" stroke-miterlimit="10" d="M3 2h54v54H3z" /> </svg> And after I SVGMorph the #searchcircle into the #searchBox shape, I would like to animate the width of the search circle, which is what I'm trying to do here. var $circle = $('#searchCircle'); var $box = $('#searchBox'); var tlMain = new TimelineMax(); tlMain.to($circle, 0.25, {morphSVG:$box}) .to($circle, 0.25, {attr:{width:300}}); I can get the morph to happen, but it seems to be ignoring the width property. I have also tried just the normal width: "300px" property as well. Not sure what I'm missing.
  14. kadams277

    SVG Masks and Animation

    I'm new to GSAP and SVG masks, and I'm attempting to make an SVG logo look like it's filling up with water. I've used this pen by Lucas Bebber as a starting point. I've got the animation working, but I can't seem to get it to start from the bottom of the logo. I've tried working with a simpler circle SVG, but I'm having the same issue. I've played around with the different numbers in the attributes, but I can't seem to pinpoint my issue. Thanks for any help!
  15. Hi, Can you help me to explain the reason why rotationX or rotationY 3D transforms are not applied to children elements of SVG (rect, circ)? This issue manifests itself only in Safari (Mac Safari version 8.0.5 (10600.5.17)) and Mobile Safari (iOS 8.3) AND only in GSAP TweenMax.js version 1.16.1 (linked from CDN or locally). View this Codepen example in Safari: http://codepen.io/Dima-L/pen/ZGGKqz – notice the linked cdn js file (//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js) Here is an identical code where rotationY/X 3D transforms ARE applied: http://codepen.io/Dima-L/pen/ZGGKqz – the only difference from above is that here linked TweenMax.min.js is version 1.14.2 Is this in fact an issue with TweenMax.js 1.16.1 or is my setup wrong?
  16. Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.
  17. Gubbels

    mouseover event

    Hey, I'm kind of struggling right now and I'm not quite sure what to do. I'm using simple divs as an example but I'm actually using an svg looking like this --> <svg version="1.1" id="martini" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <g id="olive" class="oliveScale"> <line class="st0" x1="441.7" y1="187.6" x2="355.5" y2="322.2" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 15.3108 456.2295)" class="st1" cx="424.7" cy="214.1" rx="14.2" ry="20.8" /> <path class="st2" d="M432.3,230.5c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L432.3,230.5z" /> <ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 -13.7086 454.2149)" class="st1" cx="408.4" cy="239.6" rx="14.2" ry="20.8" /> <path class="st2" d="M416,256c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L416,256z" /> </g> <path id="stem" class="st3" d="M287.1,413.8c0,0,3.6-2.4,2.9,3.9c-0.7,6.3,3.6,188.5,3.6,188.5l-60.5,15.3c3.6,3.6,64.5,0,64.5,0 s53.9,3.2,63.3,0.6c0.5-0.1,0.4-0.8,0-0.9L302,606.2c-0.2-0.1-0.4-0.2-0.3-0.4c0.2-8.9,4.3-182,3.6-188.1c-0.6-5.2,1.8-4.5,2.6-4.1 L287.1,413.8z" /> <path id="gin" class="st4" d="M174.7,286.4c39.8,46.3,112.4,127.4,112.4,127.4l20.9-0.2c0.2,0.1,0.4,0,0.5-0.1 c4.6-5.1,73.7-82.4,112.1-127.2H174.7z" /> <path id="vermouth" class="st5" d="M420.6,286.4c15-17.5,25.3-30,25.3-31.4c0-4.8-4.4-6.3-5-6.5c0,0-0.1,0-0.1,0H154.4 c0,0-5.1,1.5-5.1,6.6c0,1.4,10.3,13.9,25.3,31.4H420.6z" /> </svg> As shown in the Codepen, I have a slider with two different divs in them, here's what I want to do. Once I hover over the div box that's NOT colored black, I want the black div box to move to the left and the other div to scale to ~1.3 and move to the right. I'd know how to target more than one element using querySelectorAll but how do I give different animations to the elements I'm targeting at once? Thanks in advance for the help and advice.
  18. szsoma

    Inline SVG Snowing animation

    Hi! I would like to make a snowing animation with one or two inline svg snowflakes and I made a pen with a small success :) Is it possible to multiply the inline svg snowflakes with JS to animate them? Or how could I solve this problem? Thanks, szsoma
  19. I am animating letterforms of a font with wide and condensed shapes, i.e. interpolating between the letterform’s widest and most condensed states with TweenMax.to(). The SVG-Vectors animate smoothly in Firefox, however in Safari and Chrome the movement looks very shaky. Am I doing it wrong? And more importantly, are there ways to prevent this?
  20. jp_uk81

    Animating svg drop shadow

    Hi guys, I'm trying to animate this svg to give the effect as it lifted off the background. In this pen I tried to animate the scale and the drop shadow and the animation is triggered with scrollmagic. I have set the initial drop shadow in the CSS as advised by Dipscom here but the drop shadow doesn't animate. What am I doing wrong? If this effect can't be achieved this way is there another way to approach it? thank you
  21. Hi all, happy to join this forum with my first post! I've been using GSAP for quite some time now (Loving it!), and I also started to integrate his capability along with other cool drawing libraries. In this case, I'm having some hard time figuring out why frame-rate and animation performances decrease drastically on Safari and Firefox (Chrome is buttery smooth) when animating the following SVG shape using a combination of GSAP and two.js (Canvas Rendering). I've tried to change the rendering intent from canvas to SVG (via the two.js API) and animate a standalone SVG with GSAP only. In all scenarios, I'm experiencing the aforementioned issues. Does anyone have some good suggestion? Many thanks in advance!
  22. adimension

    SVG organice shape morph

    Hello I am new to GSAP and wanted to learn how to morph svg shapes with one another while masking an image, I seen a great example of this on codedrops but they are using anime.js where I wanted GSAP as I have already begun to learn an implement things with it. I have tried to change the animejs to gsap with much failings. Could some one please provide an example I can work from like another forum post or tutorial that could relate to what I wanted to achieve or possibly fork the codepen example with some learnings I could take home. Thank you! Adam.
  23. Artanidos

    Perspective on SVG transform

    Hi all I am developing an animation software. To deploy an animation also to the web I wrote a plugin which renders SVG and uses GSAP to animate values. Btw...you greensocks are doing a great job <3 Now I added the possibility to add 3d transformations but I get stuck with the perspective in rotationx/y. Is it possible to have a perspective for SVG at all? The output should look like the screenshot.
  24. Dash_Cool

    Animating SVG groups using jQuery

    I want to know how to add animation to SVG image groups because I tried but it didn't work. Maybe its already a topic, then please guide me to it, because I tried from my side but couldn't find anything related to it. And I am talking about a group which has many groups and elements in it.
  25. Hi, I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated. What I'm trying to do in my code- Each time the v-shaped silver svg translates away from its initial position and back, the text changes, to a different one, similarly it happens once more. Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue, thanks in advance and hope you guys have a great day!