Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'svg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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

  1. Hello guys - I've finally finished an app I've been working on for some time, as while it doesn't showcase GSAP (which I've used in just about everything else I've ever done!) - I'd love to offer free pro accounts for any developers over here who might want to use it. I have about 33,000 Open Source & Creative Commons graphics, inside of an easy to use SVG editor that can output PNGS or SVGs, and will soon also have app icon exports for IOS and Android, as well as export for the Spine animation platform. We have a few thousand pieces of game art as well - including over 400 of the best Glitch pieces, as well as the Kenney.nl collection, and others. We are at https://kwippe.com The basic app is free but a pro subscription will get you access to importing your own stuff, as well as cloud syncing (coming soon) - and lots of other cool stuff on our roadmap. Sorry if this isn't the right place for this message - but wanted to throw it out there and see if anybody is interested! We are still definitely a beta product, but the app has a lot of promise as we are offering a variations designer that makes it pretty painless to throw together some quick graphics. Just shoot me an email - stace at kwippe.com - and I'll upgrade your account on Kwippe. @OSUblake @Carl @GreenSock
  2. Hi. I've been stuck for a while on this. The goal is to tween a bubble coming from one circle to another circle while having a 'goo' effect at the exit and entry points. For the filter to have effect, I must place the bubble circle within the starting circle's group, then at some point before the bubble finished following it's designated path, remove it from that starting circle's group, apply the filter to the end circle, and append the bubble to the end circle's group. Does anyone have any thoughts on how to do this while maintaining a smooth animation?
  3. Hello, I'm quite new to GSAP and still learning the ropes. I am trying to create a specific animation that has proven difficult and was hoping someone could give me some pointers or advice on how to best tackle this. Using the MorphSVGPlugin I have placed several dots on a path and made them loop on it. What I would like to be able to do with this is when clicking a dot, to have this dot move to the bottom center of the path. In other words, the dots should loop forward or backward (based on the shortest distance) until the clicked dot is in the right location. So far I have not been able to figure out a way to make this work. Any help or advice would be much appreciated! Thanks.
  4. Hello! I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock. Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock. Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.
  5. Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: But I got stuck on trying two things: 1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id. 2)I attached a codepen sketch based on the pen from Blake Bowen; as you can see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position. Initially I want to be able to do: 1)move SVG paths based on mouse position 2)know how to apply more than the change of position accordingly Can anyone help me? Please let me know if my question is unclear. Thank you in advance!
  6. Oh mighty CodeGod! Hear this prayers and spare a drop of your infinite knowledge! This lowly being has tried to be more than what is worth. This unworthy one attempted to reach a higher level of consciousness and thought he could come up with something wise. But as fate will have it, it was not to be. One can tween SVGs, one can tween SVG elements but one cannot tween a root SVG nested within a parent SVG. Please, mighty one, show me a sign! *grovel*, *grovel*, *grovel*... ps: Editing a Pen in a mobile device is quite painful.
  7. Bernt

    MorphSVG on click

    Hi! New to this, well basically new to coding in general. Tried finding a similar project/post, but haven't found anything. Hopefully someone can point me in the right direction I have four SVG shapes that i want to morph step by step. So: shape 0 > shape 1 > shape 2 > shape 3 > shape 0 (and loop). I want the shapes to loop, but also want to force jump to next shape on click. If that makes sense.
  8. Hi, I have done animating the fabric js objects using GSAP. But Im looking for animating the SVG by using the drawSVG and morphSVG. Is it possible to achieve, If not kindly suggest any methods to animate those effects. Thanks in Advance
  9. Hello there, I'm currently working on a SVG infographic (my first GreenSock project), and I have a little problem. When I click on a tile, it will perfectly slide out of the pie chart. However it only slides back in when I click on another tile that isn't open. But I also want it to close. For example: Click Tile 1 -> Opens Click Tile 1-> Closes Now it only does this: Click Tile 1 -> Opens Click Tile 1 -> Nothing How can I fix this?
  10. Hello everyone ! I'm having a problem with the perfect looping of the leaves. This should play like : we see factory > the leaves gently show from opacity 0 up to 1 while traveling along the path > before the end of path they should slowly go to opacity 0 > the leaves gently show from opacity 0 up to 1 while traveling along the path > before the end of path they should slowly go to opacity 0 and so on and so on. I managed to do some crazy workaround that almost works, but the opacity jumps to 1 after repeat as shown in the pen. This looks like I'm missing something very basic here - if you guys know how to deal with this ANY help will be a huge help wish you a lovely day ! PS <g id="leaves">
  11. Hello together, i have some troubles with my first GSAP animation. Basically i want to animate the "swap-part" of the Quicksort-Algorithm. Therefore i have a svg-element with some rect-elements, but when the algorithm starts it doesn´t wait for the animation to finish and continues with the while-loop and the rect-elements move in a strange way. In the Codepen you see the extract of my code with the incorrect behavior. I appreciate any help. Thanks.
  12. I have simple question. When I going to use the Draw SVG Plugin does it work like, that I have a svg illustration and I drag it into the plugin and the plugin will create the path code and animation as well? The plugin automatically convert the svg into js path codes? So I don't need to write the illustration lines in js? I'm quite beginner so hope it's clear what is my question! Thanks in advance for all advice
  13. Hi! First time trying out the MorphSVG plugin and it's pretty cool! I'm trying to transition from one SVG text transform to another (and not the shape itself). I know that gsap does not support morphing SVG text, but is there a way to transition from one transform to another? The text in my Codepen should slightly move.
  14. 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
  15. 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
  16. 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.
  17. 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.
  18. 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
  19. 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?"
  20. 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?
  21. 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 ?
  22. 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
  23. 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!
  24. 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
  25. 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.
×