Search the Community
Showing results for tags 'svg'.
-
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.
-
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!
-
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.
-
Hello everyone, I would like to start by apologising for the oh so abstract title, my questions vary quite a bit. I recently began working with SVG animations, started with SMIL, continued to Velocity.js, and then found out about GSAP and its great browser support - so here I am. Bearing this in mind, while looking at my Codepen if you guys find anything I did wrong or simply something you would have done differently be it in the SVG, or the GSAP implementation please do not hesitate to mention it. So in the following Codepen that I am currently working on I ran into a few issues: http://codepen.io/anon/pen/WxJQQr?editors=1010 1. On Firefox the cup sections fill up and then return to their original state, for those familiar with SMIL it had the option of fill="freeze" in its animate which would stop the animation at its end state. I am looking for something similar in GSAP - or perhaps something else. 2. On Firefox one of the gear does a proper rotation around the center transform-origin while two of the gears decided to do their own thing. 3. In Internet Explorer, the cup does not even fill up. It doesn't seem to be anything wrong with my linear gradient as the inside of the gears does fill up but has a lower opacity than it should. 4. I ended up solving this with adding a negative delay, but what would be the proper way of starting an animation while another one is still in progress in GSAP? Would it be making a new timeline? (I also solved the issue of infinite repeat by creating a new timeline - is this the right approach?) 5. And a quickie - which combination of TweenLite + extras would I need to maintain this at minimal file size? Any help would be greatly appreciated. Thanks in advance!
-
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
-
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
-
Hello Everyone, Please help me with advice / best practice for html5 ad development. I have been trying to find some "summ-up post" showing "what goes where", but could not find any, I appologize. My trouble: I convinced the client to move from swf to html5 banners, followed Chris Gannon's example and developed html5 ads for Google AdWords. When uploading the ads data, client got the error: "Uploaded ad includes html5 code we can not approve: script. Please …" The error call is not very helpful for me, I don't see clearly where to fix this. I am using svg file, hosted image, GSAP TweenMax, I followed google image ads guidelines, wrapped svg in html file, then put svg, minified TweenMax.js and html file in *.zip Here is code I use for html wrapper: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="ad.size" content="width=300,height=250"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>IDSYS</title> <style> .banner {position: relative} .banner300x250{width: 300px; height: 250px} .banner120x600 {width: 120px; height: 600px} .banner160x600 {width: 160px; height: 600px} .banner728x90 {width: 728px; height: 90px} </style> </head> <body> <object type="image/svg+xml" data="IDSYS_a300x250.svg" class="banner banner300x250"> <!-- <param id="clickTag" value="www.idsys.cz" /> --> </object> </body> </html> sample zip with SVG, html and js files attached to this post: IDSYS_a300x250.zip If anyone could find some time, please help. Best wishes, kuba -
Hello! I'm trying to create a particle animation, something like this: http://i.imgur.com/OGpHy9m.gif The only thing difference is that i want each bubble to move a bit sideways as well. I found most of what i needed on the forum but now I'm stuck. As you can see in the codepen the bubbles move a bit but when the animation restarts it looks like a glitch, as i understand it, the bubbles start at their original x and y positions which is why that happen. I tried with yoyo set to true but that did nothing. I'm fairly new to Javascript so the code might not be best practice, feel free to correct me on this , always good to learn. Any help is much appreciated! Thank you
-
hey i have noticed that some svg specific attributes will be tweened without using the AttrPlugin and {attr: {}} syntax, and some will. is this a feature that is currently in works or is there a reason that only some but not all of those attributes work that way? thank you.
-
Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
-
I'm wondering if anyone has managed to animate multiple SVG stroke colors - on the same stroke, at the same time. What I'm supposed to try and emulate is something like this After Effects plugin... https://videohive.net/item/animated-stroke-font/11905683?s_rank=3 After reading this: https://jakearchibald.com/2013/animated-line-drawing-svg/ And looking at the first example here http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/ It seems like there should be a way of applying an array of colors to a stroke in opposite stroke-dasharray/stroke-dashoffset settings - like "80% 20%" in one and "20% 80%" in another. If it's not possible to apply more than 1 color to different offsets of a single stroke, I guess it would require making as many duplicates of the strokes as there are colors in the array and then applying those opposing stroke color draws. Anyone ever manage to do this kind of thing?
-
Hi I have simple text logo from Adobe illustrator with two strokes (done via the appearance panel in Ai). http://codepen.io/pauljohnknight/pen/xOPvAQ I want to play around with animating the outer stroke and inner letter – what is the best way to do this with Greensock? I’ve hit a bit of a wall (I am comfortable using tweens and timelines using GSAP, but up until now I have done so on divs / text / DOM elements etc). In the CodePen example above I’ve put a simple tween on the letter m, but can’t seem to work out from googling how to target the stroke on a multi-stroke svg (say, for a color or opacity animation). Any help would be awesome. Paul. P.S When I tweak the inline SVG code it lets me manually change the outer-stroke for the letter a, but not for other letters which is also confusing me? When I check the Ai file every letter is stacked correctly on individual layers etc and without any excess sub-layers.
-
Hello, I just figured out that I can save an illustrator file with live text as an svg image with an embedded font! It seems to work in all browsers that support svg. This seems a great way to have the text pixel perfect without having to use a static image (png24). My next thought was to use SplitText, since svg is a dom element with tags and so on. But it's not supported. ;..( I know "it's a different beast", but at the end of the day it's also just text. Sentences, words, individual letters... Are there plan to supports svg text with SplitText? If not, how would I animate svg text and individual letters otherwise?
-
Hi GSAP Friends, Question/Observation/Bug: Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). Size on SVG pen (awful on iOS): http://codepen.io/ryan_labar/pen/wWqGZk Size on div wrapper pen (much better on iOS): http://codepen.io/ryan_labar/pen/mErPEK Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea. Is it a GSAP bug, or the fault of the browser (or both)? Thanks! **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise
-
Showcase - GSAP Web Animation using Emjoi SVG Icons - FoxLife SoundTrek TVC
Guest posted a topic in GSAP
First of all, Sorry if I'm spamming this forum by showcasing my side project. Admins, please delete my post if it's not the right place. I'm not a pro in making tween and after completing this side project, I have seen huge scope of improvements. I'm still learning and GS forum has helped me a lot during the making of this tween. This short animation is dedicated to my daughter because she just love this FoxLife SoundTrek TVC I'm open to any suggestion and improvements. Thanks to all in this forum who helped me in making this. Please enjoy this or kindly ignore. -
Hi there, I'd like to tween a property of an SVG clipPath, or possible just the position / rotation of the path. For instance, can I tween the 'M 199.6' value in bold below? Or can I tween the rotation / position of 'Layer_STROKES' ? Thanks in advance as always. <!-- /////////////////////// SVG ////////////////////////// --> <svg height="0" width="0"> <defs> <clipPath id="svgPath"> <path id="Layer_STROKES" stroke="#CCCCCC" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none" d=" M 199.6 120 L 199.5 119.5 201.325 120 M 71.8 90.5 L 289.95 150 109.95 270 70.05 90.5"/> </clipPath> </defs> </svg>
-
Hi - pleasure to meet you all. My first post but have been getting to know GS over the past few weeks and love it. However now I'm getting stuck. I've been trying to figure out how to make responsive SVG timelines - i.e. set SVG timeline "keyframes" in % such that (e.g.) left:100% will always be at screen right, regardless of screen size. Worked my way through your trail here (http://greensock.com/forums/tags/forums/responsive/) but I'm missing something. As a newbie I'm finding some of the examples a little too confusing to work out so I've created an example of what i'm trying to understand .... I'd like to substitute the X & Y values in the codepen for % along the lines of tl.to(cssCircle, 1, {left:100%}) .to(cssCircle, 1, {top:100%}) .to(cssCircle, 1, {left:0}) .to(cssCircle, 1, {top:0}); Many thanks
-
Hello, I have a task to animate an SVG (simplified map of a city), where road signs are part of the presentation. Everything goes quite smoothly with GreenSock (drawing SVG lines, rotating the whole image, etc.), but I cannot get the last part to work as intended: the small signs should always face the screen (the camera), while the whole SVG rotates in 3D, and the signs follow the path set by the parent rotation (and other tweens). Something like this image: My idea was to rotate them in the exact opposite direction as their parent goes (and the animation should last the same amount of time), but this does not work (except for the Z axis, where it does what is planned). The codepen has the full SVG (it's quite large), the JS code that I tried to use (and some CSS only so the image can be seen). Has anybody any idea how to achieve this effect? (Or is it possible at all with CSS / GreenSock animation? Thank you in advance, Gergő
-
I'm new to SVG's and trying to get this to animate. I thought something like this would work TweenLite.fromTo('.path', 1, {drawSVG: "0%"}, {drawSVG: "100%"}); but unfortunately no. http://codepen.io/Meds/pen/grWOXW I would like to line animate this logo, any troubleshooting guidance would be appreciated.
-
Hello everyone, I've created a tweenmax that alters a clip-path from an external svg file. While it does seem to work, there is a problem with the rendering as you'll see in the attached pic. Once I hover over the div with the cursor then it changes immediately to the correct clip-path. What could be the issue here? EDIT I attached the screenshot
-
Thought I'd share a couple of CodePen's that might help someone. I was charged with coming up with something that would allow a user to dynamically load an SVG into a container and then draw it using drawSVG. (Our organization got the Business Green membership so we wanted to get all the goodie we could get out of it!) As you know, not all SVGs are alike and we didn't have the convenience of being able to go into every SVG and add class names. So, first I needed something that would snag an svg file in an img tag and replace it with the inline version. I decided to use this (won't go into the process of doing that but it works): https://www.npmjs.com/package/inline-svg Then I needed a script that would parse through the lines, paths, etc to see what was there and draw the SVG. I wrote a really quick function that will do that and added a couple of bonus functions (center on the screen and shake) for good measure. Hope that helps someone who might have the same issues at least get started.
-
Hi all, I have svg with couple of rectangles and I would like to scale them randomly while hovering with respect to the svg origin. At the same time I would them to rotate individually around their axis. The problem is that either transform origin gets overwritten by svg origin or vice versa. See the pen http://codepen.io/anon/pen/RRowRx. The rotation is commented out. Thanks a lot for any suggestions!
-
Hello! To be able to animate masks, I started using svg. My goal was to keep it really simple and also have support for all browsers (incl. mobile) and IE10+. I found this site, which described a way to achieve what I want in a perfect way: https://thewebstorebyg.wordpress.com/2013/12/29/cross-browser-svg-masking-supports-ie8-ie9-ie10-firefox-chrome/ Based on that info, and a post on this forum recommending to use the AttrPlugin to be more cross browser compatible, I've created this: http://codepen.io/treemok/pen/gMpaVX?editors=1010 While it works great in all browsers, I'm running into some issues: 1. I'm getting an error TweenMax.min.js:16 Error: <image> attribute y: Expected length, "null" TweenMax.min.js:16 Error: <image> attribute x: Expected length, "null" 2. I'm not able to use "scale" at all or independently change "width", or "height" properly. Any help would be great! Thanks.
-
Hi GSAP brothers, Thanks to Draggable, I can make a svg draggable within the bounderies of its frame. That is to say, if I use : img id="SVGmap" src="map.svg”. But when I use javascript to get inside the svg to control some elements, I get an error. If I use: object id="SVGmap" data="map.svg" type="image/svg+xml”, the javascript to control from outside works, but I cannot drag the svg anymore. I made a codepen: http://codepen.io/jaswa/pen/NrNorL Unfortunately the javascript does not work with an absolute link as I have to use here( why not?), but when the svg is on the same server, it works… Does anybody know how to drag AND control the svg from the outside? Thanks in advance for your answer! jaswa
-
Trying to learn animating along a path with Greensock. I got the animation working, but I can't seem to get rid of the white background. In the codepen, you can see there is supposed to be a green background (bg) in the html file. But a white background, that seems to be within the <SVG> tag is blocking it. Does anyone know why this is happening? Is MorphSVGPlugIn causing this? Thanks.
