Search the Community
Showing results for tags 'svg'.
-
Greetings GSAP community, I'm having some trouble getting an SVG origin to center. Please see the Codepen, there is not much else to explain. Thanks in advance for any help. ~Jareth
-
Hi All! I'm a newbie and i hope somebody can help me regarding a matter. Here below a short explanation. I'm trying to create a Preloading animation using Gsap. As you can see i have created a little SVG sample, then i have animated It using a timeline (nothing complicate and i hope i did it in the right way): At this point i want something that work in this way: A percentage progress linked with the Timeline. I have tried in many ways but nothing seems to work as i want. I know that the solution require a Javascript code but i don't know how to put Javascript and Gsap together. I hope I was clear, Thanks in advance. Dave
-
Hi. I can't seem to make GSAP run well on Safari. I made a simple example which runs smooth in IE, Chrome, Firefox except for Safari, where it ends up choppy. I've seen this happen not only with GSAP, but js in general, where it just can't refresh fast enough, though I don't know what's that about. I'm fairly new to coding and I would appreciate any help on how to do SVG animation properly for all the browsers. Thank you, Rojus.
-
Hi guys, Tween for tween ZUMI is becoming alive. Thanks CARL. And I am proud to present the small advances. The challenge is an optimal interaction of SVG elements and the possible animations. That means trial and error - and a lot of time. But it is an entertaining pastime. And learning by doing. By the way, the 'more' part - an adaptation of Blake's pen - is integrated somewhat unorthodox. I'm still not fit in JS. But I've already found another example of Blake to control start and stop function. For the moment I have no concrete question. I have to clean up the SVG and the code a little. And I still experiment with movement sequences which I can store using later by add and progress. As ZUMI already says: See you. Mikel P.S .: ZUMI is the mascot of a dental practice in the neighborhood especially for children. With a bit of imagination, I hope to arrange an entertaining story for the kids.
-
Image: https://www.dropbox.com/s/r2tgtnenucbz3dt/Screenshot 2017-07-23 14.30.07.png I'm trying to make the image on the left (a staple) morph into the image on right ("S") by bending the path into place vs. the effect I currently get with morphSVG. The effect I currently get is more "blob-like" when the transition happens vs. a smooth and graceful bend that I prefer. Any suggestions to help me get on the right "path?"
-
I can't find anything on how to create the SVG file for drawSVG strokes. I have it in Illustrator, I know how to output SVGs, but the file code is different from what your tutorial shows. What is the way to setup your SVG file from Illustrator?
-
Hi, I need to scale a polygon so that its "width" goes to zero. In the codepen its the pink element. It seems like the scale animation makes it rotates. I've included a blue rect who works perfectly. Is it normal behavior or did i miss something ?
-
Hi! I'm trying to bevel (extrude) and carve (cut into the page) this shape as an animated button. I have more complex shapes to do this with, which is why I came up with this layer stacking approach. I'd love to hear better ones! I've also used this approach with images, which one can smear & darken this way, a nice effect when used with textured images! My ask is about the few frames that the shape is closest to being "flush" with the panel it's on/in. When masking between the bevel / carve parts, we see an aliasing artefact that is made worse by it being so close, in time, to the other state. When the white part pops out, it's a bit "fat", and when it's going in, the dark part is visible at the edges. The glitchyness is most noticeable on non-retina screens. Would you have any idea on how to make the less extreme states of this animation less glitchy?
-
Hi everyone, Noob issue here I imagine, but it appears my SVG is overflowing it's 'bounding box' while scaling... I've searched online and can't seem to find anyone with a similar issue. Any ideas what I'm doing wrong? Thanks
-
Hello... I'm new to Green Sock and have some difficulties in a project. I found an interesting example, which i want to insert in a website that i am working on. The example is html and css and i want to make it animate with a tween or timeline. Can someone help me? Thank you in advance. I've put the codepen example and a file with whole code. Can you help to make the animation in example to run in reverse , i would like it to start with the parts of the image scattered and in the end combine them all together to the final image. Sorry if i didn't make my self clear. Code.txt
-
Hi Blake, I have seen your pen My aim is to animate elements of the SVG and to add a random chance at least. But I failed to use an inline SVG in this context instead of a background image. A little hint ... ? Kind regards Mikel
-
Hi everyone! This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here. I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle). My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step? The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example. Does anyone have any ideas of how to solve this problem? Thanks!
-
Hi! I've built an animation with greensock and I checked the repaint in Chrome (and in Firefox too). And there are. Is it okay or should I optimize my animation somehow? Thanks, Soma https://codepen.io/szsoma/pen/vZgxmq
-
Hi, Does anyone know of a working example or a pen using the GSAP SVGdraw plugin inside of Pixi.js canvas setup ? The goal is to draw ( animate ) svg paths of an svg redrawn inside of Canvas. ( svg inside the canvas is setup as Pixi graphics object. ) Thanks.
-
Hello, I'm trying to make an animation using a SVG file as framework of a embed video. I don't know how to make rect and paths to animate, I've tried everything. The animation should be from the center of the top line to the left and right and while advancing paint the path and ends in the central part of the bottom line. The final animation is not important, for now, but the svg does not move at all in codepen.
-
Hi, I'm using SVG to create buttons in a different shape rather than the usual rectangular button. The problem is (at least the one that I'm working at the moment) is that the animation, whilst it works as intended, doesn't seem to run at the same rate across different browsers. Firefox, Edge and IE 11 run fine, as I like it to, Chrome and Opera on the other hand have a weird slowdown look to it. Unfortunately, whilst I can use the :hover selector on the elements and do it that way, which grants me consistency, in order to have it so the hovered button stays on top of the rest I have to re-order the SVG elements to have it on the bottom, doing so seems to interrupt the :hover transition in some way on Firefox, Edge and IE 11 but works fine on Chrome and Opera. There may be an error in how I've set it up in general, but it appears to be good enough. Any help will be appreciated Thanks
-
Hi everyone, I'm trying to animate some objects (arrow heads) along the path of the arrow itself. CodePen attached. I'm attempting to use the BezierPlugin to achieve this, but transforms are being applied to the position of the arrow heads in a strange way. I'm sure there is a straightforward solution to this, but I can't seem to figure it out! Many thanks for any help provided, as always!
-
Hello there! First of all, thank so much for such an amazing library. I can't stop recommending it. We integrated gsap on our project in order to handle better the timings and make our code much easier and performant. I will share the temporary url with you so you can take a look: http://lab.pre.rtve.es/el-cuento/ We are getting good results on desktop, however, not so much on mobile devices. It gets all laggy sometimes and the animations start to suffer delays. How could I improve performance for mobile devices? I have been trying to set the framerate on Tweenmax ticker to 60fps, I tried force3D:true on all our translate/rotate/scale animations but still cant see a proper improvement... Do you think I made a bad choice and this is too many animations for a mobile device? We are only animating our character, doing translates, rotations, scale, and svg morphing using Snap.svg. We have a function that takes an array of svg groups (parts of our character) and goes one by one throwing snap svg morphs in order to make, for example, the whole mouth move from one type to another. Thank you very much for your help, Ricardo
-
Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
-
Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
-
Hi GreenSock People, I've been playing around with GreenSock for a little while and I should note that I'm more of a Graphic Designer than a Digital designer, but I'm getting there. So, I need to complete a project that animates an SVG, similar to Petr Tichy's tutorial "SVG lab" https://ihatetomatoes.net/get-greensock-workshop/ . But I would like to incorporate the user interaction of this http://www.because-recollection.com/laurent-garnier, which is in the showcase on the GSL site. It's the 'cog' animation. So the longer you hold click the faster the timeline plays. I haven't started the job yet, but just wanted to know if there was a way to tackle this. Any help, would be amazing! Thanks. John
-
Hello! I am trying (hoping) to achieve SVG tulips to look like they are gently swaying from left to right in a type of 'evening breeze'. The way I have thought about it, is to have two outlines for each tulip and the morph between these two oulines back and forth to give the idea that its slightly moving. Erm... So looking at my CodePen, the result ended up being faaaaarrr from that... I thought trying to change the index point might help. But its still rather messy. Another issue could be that the outlines are too complex different. I am now not even sure if morphing is the way to go. I did have a close look at the GSAP WaveSVG function (the one for the morphing green cape), bit that is way to complex for me. I also found a previous article in your forum: This CodePen from the article is really lovely. It is this effect I was thinking about. But not sure how to apply that to SVG tulips... Any ideas? Is it possible? Do I need to work on the SVG shapes more? Thank you in advance.
-
Hello GSAPers, I would like to know if there is an alternative to make SVG Draw work within Adobe Edge Animate, I made a search inside the forum I found this file but it is not working, I believe it is because the EdgeCommons has been interrupted. Can you upgrade that works from this file? GSAP SVG DRAWING AND EDGE ANIMATE.zip
-
Hi all, I'm new with GreenSock and quite happy with I've done until now with it! I've to do a animation through a path. All seems right up to here. But it needs to be responsive. I mean, as the path adapts to the width of the screen, the animation should also adapt. Is it possible to do this with GS? Any help will be really apreciated. Thanks!
-
I have an image: and I want to fill the missing part of it. The best way I found was to convert the missing part of the image to SVG and then start filling the missing part using tweenmax. For reference, I have added the animation for filling the svg but it is not animating like what I need i.e. it is increasing from center point. I need to blend the animation like the image missing area is filling from one end. I can change the way of animating if there is any other way we can fill the missing part of the image? I have also tried other solution of fill mode but smooth transition is not happening in it.
