Search the Community
Showing results for tags 'svg'.
-
Hi there, I just started to work with GSAP and I made my first animated SVG. I developed everything local and now I wanted to integrate it in my WordPress site. The inline SVG has round about 1000 lines and wordpess some how struggles with this much lines. The result is that the svg looks broken and parts of it are missing. So I integrated the svg with <object></object> now it looks proper. I also enqueued all scripts but the animation is just not starting. In the console I can't see any errors related to this. Any of you more experienced guys may have a look at my work? I hope you can see what I did wrong on a glance! Here is the link Some background information: I use a caching plugin and a CDN but allready tried it without caching and CDN... no result. Thanks in advance!
-
I've given up and trying to figure this out by myself. Mostly because I want to get this animation finished. I am trying to line up the tweens 'line' and 'text' for the codeCatch timeline of the Master timeline. I want it to look like the text is attached to the end of the fishing line. It's almost there but I'm at a loss at how to fix this on my own. The animation of the 'line' and the 'text' was aligned until I started animating the rotation properties in the earlier timelines. -
Hello fellow Greensockers! My conundrum is as follows: - I'm trying to layer several images on top of one another - Each image is masked with a curved / irregular shaped SVG mask (could be PNG or SVG Path or external SVG) - Each mask needs to animate - Now heres the kicker, each image needs to be clickable / interactive within the constraints of the mask area I forked Jonathan's example (http://codepen.io/jonathan/details/OyarJK), as it was already using an animated SVG/PNG mask which ticked off the 1st 3 points above. My fork is here - http://codepen.io/timostsauber/pen/zqzmKV I am using a SVG Path for the 1st mask, and a SVG file for the second mask. Just to test both. So the 1st one is not using attr for animation whilst the second one is. Each image has a hover event listener, but as you can see the top image clickable area takes up the entire banner, outside of the masked area. I realise I can achieve this with separate, invisible buttons on top of the SVG image masks, but this would mean code duplication, and also animating the invisible buttons to move with the masks + images. I tried various combinations of pointer-events on the image / SVG layers, but to no avail. So I'm very curious to know if this is possible, as this method of masking seems to be the best and most cross browser friendly. Thanks for any help in advance! -
Hi There, I'm new to Greensock and i have been playing a little with the plugin, especially the MorphSVG plugin. For my current project i'm using Greensock to animate some elements on the site but i'm also trying to achieve animated icons. Now i'm been searching to create a simple tween between 2 groups <g> but i read in old topics that it's just possible to do a one on one path morph. As i already include this library, and try to avoid including more, i would like to use MorphSVG for this without recreating available SVG icons with a seperated animation. Am i overlooking something, is there a workaround for this or should i look at some other library? With kind regards, Gerjo
-
I am trying to create a water fill effect that responds to a input type=range value. Managed to get it fill up but the timeline is not responding after the first animation. You will see what I mean in the JSFiddle. Any help would be appreciated! Still new to GSAP animation so excuse any hacky methods. JSFiddle link here. https://jsfiddle.net/7mLkf5uh/#&togetherjs=bu7OUD9asn
-
Dear Greensock Pros, We are developing a Formular 1 Race Game. The game is mostly of strategic nature but as a visualisation we also want to show the final races in a very plain and 2Dish style like shown in the codepen. We would like to pass an array of objects to GSAP-Module with all the data of the 18 participating drivers: id name avg time (this player will need for one round based on his settings) pitstops (array of lap numbers in which the players plans to do pitstops) pitstop delay (s) probability of accident probability of technical problems All the GSAP has to do now is to animate those 18 dots along the SVG track according to the avg time every player needs for each round, which should have a little fluctuation, maybe 2%, each round. We dont have to show a realistic movement (slower in curves and faster on straights) but if that can be done easily it would look nicer. The dynamically drawn course color based on speed as shown in the pen is NOT neccessary. A plain black track would do just fine. If one of the two events (accident or technical problems) happen the car slows down and comes to a halt. On rounds stated as pitstop rounds, the car should follow a second SVG track which is identical to the first one, but has a pitstop-lane instead (compare: http://internet-agentur-bodensee.com/intern/pm/f1/trackItaly.html). The car will slow down on the pitstop lane and stop there for the players pitstop delay time. Afterwards it will resume the race. After a predefined number of rounds (48 to 62) the reace is over. Meanwhile the script should fill another array with the race times of each player. Thats it... I am looking forward to your proposal and will be glad to answer questions if there are any. Greez Daniel
-
Dear Green Sock pros, We are developing a Formular 1 simulation for which we depend on "cars" (=dots) moving on tracks, that we already built as SVG path. We are delighted by GSAPs animation capabilties so we would very much like to use it. Sadly it seems, it supports animation along a path only based on bezier curves with a value list, but not on SVG path'. Does anyone know a workaround or have information about the implementation of SVG path support. Thanks a heap! Daniel
-
Hi there, I am using the below codeon our theme here: http://goodlife.fuelthemes.net/2015/10/10/sunset-overdrive-and-the-mystery-of-the-mooil-rig-review/ TweenLite.to(_this, 1, {attr:{"stroke-dashoffset":offset}}); If you look at the console, you'll see that we are getting SVG related notices: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
-
Hi, This is more a question about SVG, Illustrator and Chrome but I think there is a SVG expert in this room. There is few options to embed font in SVG with Ai (check my codepen), SVG is now with a lot of <glyph> tags but it's not render in Chrome (just in quickview on mac). So, how to embed font to use with GSAP and get best animation ; vectorize a big paragraph ? or just put in @font-face style is ok ? what's your workflow ?
-
hello everyone, i got another trouble and i hope anyone of you can help me. i get one svg, there are six circle inside of it and i want to move the pink to the right with left property but i doesn't work. it worked when i changed the left with x. so what is the trouble?
-
hello everyone, i'm wondering how can i centering my svg object exactly in the center of the screen. I give a style for my svg like position: absolute, top:0,left:50%, transform: translate(0,-50%). how can i move it to the center of the screen with gsap?
-
hello friend , in above codepe link it shows blinking light animation it work on google chrome but not in mozilla firefox so please check and give suggestions thnx...
-
I am animating a photo within an SVG clip-path, what I have below works in IE11, Chrome and Desktop Safari, but doesn't work in FF and iOS Safari http://codepen.io/mattparkerseverin/pen/OMYEbX I've been researching this issue here on the forums, and elsewhere, but I can't seem to implement the fix suggested here - http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/ I understand the the Attr plugin could work, but I'm not quite sure how to utilize it.
-
Hello, The following code pen example shows unwanted morphing behavior: http://codepen.io/anon/pen/YwJZBe I played around and realized that the underlying issue is caused by the value in the paths 1e-5 and 10e-6. The following changes: Change 1e-5 to 0 in path1 Change 10e-6 to 0 in path2 can be seen in this codepen example: http://codepen.io/anon/pen/bEmWOp And this is the expected behavior. I am using Inkscape to create the svgs. I played around with the precision and saving as an Inkscape SVG, Plain SVG and Optimized SVG, but I didn't have any luck getting rid of the precision whilst preserving the shapes. A quick Google search on how to handle numbers in that notation turned up this stackoverflow: http://stackoverflow.com/questions/10943997/how-to-convert-a-string-containing-scientific-notation-to-correct-javascript-num Would it be possible to have the MorphSVG plugin filter the numbers in that way? Could I get an unminified copy to make the adjustment myself? Or can anybody offer some other work around advice. Thanks!
-
Hi all I need to animate an svg with gradient and I'm using SMIL at this time. Unfortunately in IE and Edge it doesn't works Is it possible to animate it with GSAP? Thanks in advance
-
Just wondered if any geniuses out there had any tips for a clean undulating animation for a path? Like a balloon string, or water, or a cape or sheet in the wind? I know there are various ways to approximate it, and I have fiddled around a bit previously, but wondered if there is a good method to do this. Perhaps an SVG path with lots of points and straight lines between, where you can run a stagger animation on the points? But then you'd have to be able to target points specifically in the SVG somehow. Would love to know your thoughts. Very basic example included, but you can see the curvy paths with control points don;t animate so well. Thanks
-
Hi Friends, I'm hoping someone can help me to understand the behaviour I'm experiencing when trying to use svg masks dynamically. The codepen technically works as intended however the only way I can seem to get them to work is using the .fromTo() function and I imagine the .to() and .from() although I haven't tried them specifically. I am however wondering if I can preposition the svg out of it's mask with the mask property remaining intact and the mask remaining in place by using perhaps the .set() function although I can't seem to get that to work. Also using translate transforms doesn't seem to work. Any guidance is much appreciated, Adam
-
I'm trying to create an SVG that has clickable shapes, which, when clicked fills the entire shape from the inside out. http://codepen.io/anon/pen/OMBPar ^ This works well for filling the entire region at the same time but what I'm trying to achieve is a "ripple effect" which will fill outwards from the point at which the click took place. So the fill "diffuses" out to the edges of the shape (and stays within the clicked shapes). Essentially, I'm after something like the following effects: http://tympanus.net/Tutorials/SVGRipples/ http://codepen.io/zavoloklom/pen/wtApI http://codepen.io/Craigtut/pen/dIfzv http://codepen.io/anon/pen/BjYQeM But ideally just using Tweening - is this possible? Any help is much appreciated! Thanks.
-
I have an SVG with a number of drawn paths/lines. How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them? For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them. But how can I make them go whichever direction the mouse passes through? Or maybe even something cooler, like the particles.js repulsion effect? I'm not looking for an entire code solution; just a helping hand to get me started. I'll be updating my Codepen slowly as I work out how to go about this. Thank you in advance.
-
Hello, I have a square that I want to morph into three circles. Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape? The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up. Thank you! tl = new TimelineMax({}); MorphSVGPlugin.convertToPath("circle, rect") tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");
-
Hello! A new project has brought me to GSAP and I'm starting to wrap my head around what's possible, how to do things, etc. Please forgive me as I fumble my way through this… Rather unsurprisingly, I've stumbled into a wall with regard to the first animation this project requires, which can be described as scaling a huge svg by a large number … but perhaps it's better to link straight to a demo page. Forgive me for not using CodePen—they have a file-size limit and this demo exceeds it: https://jsfiddle.net/163eys6b/7/ Give your browser a little extra time to process that page; like I said, the SVG is huge. The project calls for a big map of (almost) the entire world which starts zoomed all the way in to Amsterdam, which then slowly zooms out all of the way, from scale:1600 to scale:1. In the above JS Fiddle, you'll notice that it does what it should do, but it does it with a stutter (I'm using the latest version of Chrome stable as I type this, version 47.0.2526.111). I can remove the stutter by removing force3D:false, but that results in a very blurry experience about 5 seconds after the zoom-out animation begins. Am I doing this right? Or, is this SVG + scale combination just too much for the browser to handle comfortably? Thanks for your time!
-
I'm trying to animate fills on SVG paths. I can use Tween to fill the entire paths progressively but I'm looking to animate the filling progressively from an origin and was wondering whether this was even possible with GSAP? In the linked Codepen (http://codepen.io/anon/pen/RrYxXq), I've been able to fill each pencil in-turn, but the desired effect is to have each pencil filled one-by-one from the bottom upwards, (filling each pencil from white to the full colour from the bottom up as if filling with water) - sort of an equalizer effect. Any help/guidance would be much appreciated! Thanks!
-
Hey there I was simply wondering if there existed, somewhere, a practical workflow that one could follow when working with SVG – the aim being to streamline the process of creating SVG in Inkscape or Illustrator, then translating it into markup that GSAP understands. I am not facing any particular issues at the moment, but I just finished working on an animation and it did cause some head-scratching. For instance, if you save an Illustrator project as an SVG file and then look at the code, and paste some of the information on there in your JS files to feed them to GreenSock, the result often differs. The reason for that is that, when you apply some transforms to your shapes in Illustrator, the software interprets some of it as actual transforms (which go into a transform matrix) and some of it as simply changing the shape's x and y coordinates. Then, when you enter the same info into your code, I think GreenSock just converts it all to a transform matrix, leading to varying (and sometimes wildly unexpected) results. Add to that traps like unaccounted-for changes in transform origins... and it can get pretty messy. I'm not looking for a solution to the situation I described above, nor for explanations as to why it happened the way it did... like I said, I don't actually face any problem at the moment I'd just like to know if there are best-practices and methods that are compiled somewhere that I could learn, to save some time for a future project. There's http://greensock.com/svg-tips, but that only provides examples of how GreenSock achieves various effects, not how to integrate all of those together and within a larger workflow. As an example, I know that it's usually more efficient to use relative values in your GSAP code instead of relative ones (like x:"+=10"). I'm not sure I would be able to explain why, but I found that it led to less errors – not on GSAP's side, mind you, but on the translation from vector-editing software to JS code. The issue's on the human side more than anything Cheers!
-
This is my first time trying to use the Bezier plugin and I'm very confused as to what I'm doing wrong here? In the codepen example I've attached, I've added borders to show where to hover to fire the animations. I'm trying to loop through a bunch of SVGs and tell the polygon inside of each of each SVG to animate down the path inside the same SVG. If you hover over the box on the far left, this is acting exactly as expected - the arrow animates down the path and does a little bounce at the end. However, none of the other ones inside the loop work as I'd like. The positioning of their arrows get progressively worse and I'm not sure why? I've logged the path data that I'm passing to the timeline and it looks correct, so I'm really confused as to where I've gone wrong in my code. Any help is greatly appreciated
-
GSAP Masters, Have come across a situation that you are all more than likely preloaded to fire back a response to explain why. The codepen example above is handled allot different in chrome as it is to firefox or internet explorer (all that I have tested at this stage). I was looking for a way to only transform on one shape but then pattern that render across the whole page as opposed to transforming lots of shapes all together (was killing my cpu). Chrome let me believe I was close to an answer until yeah the other browser checks bummed me out. Looking forward to your response. Cheers, Bundy
