Jump to content

Search the Community

Showing results for tags 'svg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi there, I'm a bit new in using GSAP. Recently I have made an animation with high def images and svg shape morphing. I think i'm doing something wrong because this animation is really laggy when I use delays between each elements. If I play them together at the same time it's really smooth but it's not the effect I want. Any advice here ?
  2. I'm a relative newbie to GSAP, so this maybe a simple problem but I can't seem to figure it out. I have a ball coming into the frame on one bezier/motion path which is working as expected. However, the next transition for it to go out of the frame has the curve going down instead of up. See the attached image for how I want the paths to work (how they look in flash). The second path works as expected when it is not following the first path. Can someone please explain what I'm missing? I put together a codepen.
  3. Hi, I was wondering if anyone could help me out with a pretty complex path animation. I have a path looking like a radio wave and I need it to go through four stages where the last one just makes the path into a straight line (see attached image). Is this possible with GSAP ? My SVG looks like this: <svg id="secondwave" xmlns="http://www.w3.org/2000/svg" width="1440" height="165" x="0px" y="0px" viewBox="0 0 1440 168" style="width:100%;height:auto;" xml:space="preserve"> <path class="st0" d="M0,167C11.2,167,5.9,1,15.5,1S23,167,33.2,167S37.5,1,57.8,1s13.4,166,32.1,166S99.6,1,122.1,1 s16.1,166,32.1,166S169.7,1,189,1s15,166,30,166c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166 s11.8,166,30.5,166C369.4,167,361.9,1,371,1s7.5,166,16.6,166S394,1,403.1,1s3.7,166,17.1,166S425,1,436.8,1s12.3,166,17.1,166 c4.8,0,4.3-166,16.1-166c11.8,0,4.8,166,17.1,166c12.3,0,5.4-166,15.5-166c10.2,0,1.1,166,17.7,166c16.6,0,12.8-166,28.4-166 c15.5,0,19.8,166,33.7,166S599,1,616.1,1c17.1,0,7.5,166,29.4,166C661.1,167,661.1,0,682,1s18.7,166,34.8,166 c16.1,0,13.9-166,32.7-166s13.4,166,31.6,166S784.8,1,801.9,1c17.1,0,5.9,166,18.2,166c12.3,0,5.9-166,15.5-166s-1.1,166,17.1,166 S854.4,1,868.8,1c14.5,0,5.4,166,19.8,166c14.5,0,5.4-166,14.5-166c9.1,0,5.4,166,16.6,166S925.6,1,935.2,1s7.5,166,17.7,166 c10.2,0,4.3-166,24.6-166c20.3,0,13.4,166,32.1,166s9.6-166,32.1-166c22.5,0,16.1,166,32.1,166s15.5-166,34.8-166s15,166,30,166 c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166c20.3,0,11.8,166,30.5,166s11.2-166,20.3-166s7.5,166,16.6,166 c9.1,0,6.4-166,15.5-166c9.1,0,3.7,166,17.1,166c13.4,0,4.8-166,16.6-166s12.3,166,17.1,166s4.3-166,16.1-166s4.8,166,17.1,166 s5.4-166,15.5-166s1.1,166,17.7,166"/> </svg>
  4. Hi guys, I asked this a few months ago, it seems like for some reason it was ignored so I thought I'll bring it back to the attention of the GSAP dev team. The problem here is that when a Draggable SVG element with "svg { overflow: visible }", dragged out into the overflow area of the SVG, draggable is not able to drag it. This currently only happens in Safari. Is this a bug? Here is the post from the past: http://greensock.com/forums/topic/11225-draggable-svg-element-which-is-also-rotatable/#entry50147 I hope this time it gets some attention and is fixed asap. Cheers!
  5. I was using draggable on an SVG element and this was popping up, when testing my work in chrome , this warning pop up in the console log: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. It was saying it was coming from Draggable.min.js:14. I was wondering if i should be worried about this warning since i will be using this plugin on svg code during and after that time frame? Will the plugin will be updated for this or should i not worry? Brad
  6. Hey everyone, Warning: self-promotion to follow, but it may help other forum members so here we go. As you already know, easing is an important part of creating a great animation. If you’re at all like me, you like to experiment with a variety of eases and get a feel for how they work in your project. With that in mind, I’ve created a new GreenSock Easing Playground. Yes – we have the Ease Visualizer which is great and I highly recommend it. I wanted to create something a bit different though. My new CodePen offers position, scale and rotation options with 15 ease types in each section. It’s all one big SVG with 45 animations and fully ready to zoom with the viewBox controls. I’ve added a variety of icon choices and color schemes as well. Hopefully you get some use out of it or at least a reminder of how some of the eases look. Special thanks to @greensock, @sarah_edo (Sarah Drasner), @vlh (Val Head) and @snorklTV (Carl Schooff) for the tweets/retweets this morning. It helped push my pen to the top of CodePen for a while which was pretty cool.
  7. Hey guys! I am fairly new to GSAP and i am learning it by building stuff. I have an svg in the middle of the page and i would like it to animate to the left and then display the content of the page (which i did not coded yet). When the user clicks it again, i would like to return to its initial state and hide the content of the page. Throughout the past few hours, I tried various on click functions with if else statements but nothing seems to work. With the show/hide part of the content i will deal with it later, for the moment i would like to learn how to fix the clicking part. Thanks in advance!
  8. I’m looking for some help, please. I’d like to use the zooming effect like in the quoted Pen, but the viewBox attribute isn't behaving as I expected and I can’t tell what I’m doing differently. Here’s the original Pen with the issue: http://codepen.io/kylegach/pen/jqYaYp (Edit: this is now fixed, but the simplified one still exhibits the issue, for reference) And here’s a simplified test case without GSAP to show that even a static viewBox isn’t behaving the same as PointC’s example: http://codepen.io/kylegach/pen/ONzzaG I’ve also read this (excellent) explanation of the SVG viewport, viewBox, and preserveAspectRatio: https://sarasoueidan.com/blog/svg-coordinate-systems/, but I just cannot determine why mine isn’t working. Any help would be appreciated. Thanks!
  9. Hi Guys, I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work var thinLineArr = []; var num = Math.ceil(ww/lineThickness); transitioncontainer.css({'height':wh}); // Adding all the lines to the scene var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">'; for (var i = 0; i < num; i++) { var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />'; thinLineArr.push($(line)); svg += line; }; svg += '</svg>'; transitioncontainer.append(svg); //Starting Scrollmagic var timeline = new TimelineMax() for (var k = 0; k < num; k++) { timeline.add(TweenMax.from(thinLineArr[k], 2, {scale: 0})); } var scene = new ScrollMagic.Scene({ triggerElement: "body", duration: 1000, offset: 100 }) .setTween(timeline) .addTo(scrollMagicController);
  10. I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place. And not sure what's the best search term for this. I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG? What is the best technology for this and where should I be investigating? - - - *Updated: I have found the article for it. It is done with CSS. I wonder GSAP can do the same too? https://css-tricks.com/reverse-text-color-mix-blend-mode/
  11. Hi everyone, This is my first post here. First I want to say thank you to the people who provided these absolutely amazing animating tools for web which make the web a more fun place to code for. Then I think I have found a bug in the animation flow which at least exists in TimelineMax but I am suspecting the source to be in the TweenLite as to my understanding is the origin for all the animations. The problem: When I make a TimelineMax object and add TweenMax.to() animations to it, if the animation is done only on standard HTML elements things will work flawlessly, but as it can also be seen in the CodePen I provided, when I have a SVG element with its children elements, if I want to animate the children elements in the middle of a timeline two things will happen. 1) The SVG elements animation order will be missed up and will not work correctly. 2) The animation on the standard HTML elements will not wait for the SVG elements animation to be finished. In other words, the animation on the standard HTML elements registered after the SVG elements will be started on the same time as the first SVG element's animation. I have reviewed the order and timings several times and I think they are correct. I have also written the code several times from scratch to make sure that I am not messing anything up. It would be really nice if you can figure this bug out and release a new bug-fix version. I am currently working on a project and I really need this feature to word correctly. Thanks in advance.
  12. Hi everyone Just in case it has not been mentioned yet whenever you use svg in your htmls, make sure to explicitly close the all elements: i just had an issue with a set of banners to be uploaded to adwords and would like to share the essence: for AdWords always use <path..></path> instead of <path .../> while all browsers seem fine with the shorthand closing, adwords actually is not. it took the adwords technical support 3 days to realize: Hope it helps to save you time and frustration Cheers Gatekeeper74
  13. I am using pan/zoom to zoom/pan to an element in an svg, which works great the first time. Then after dragging it, it will not position correctly again. To pan/zoom I tween the viewBox using values from the element's getBBox(). Is it possible to sync the draggable plugin with the tween library when tweening the viewBox? Would it help to create a child svg, and tween that and drag the parent svg? I have tried many ideas from the forum, including clear(), onUpdate.
  14. I'm looking for some ideas to use a large (2000x1000) world map inside of a small container (1024 x 768). I set the wrapper as the "bounds" and this worked great in Chrome, but I noticed that Firefox didn't like this and had weird bounds behavior (basically tries to force the map inside the smaller wrapper, but fails). I think Firefox doesn't like that the world map is bigger than something it's supposed to be bound inside of. What I need is sort of like bounds, but not exactly. I need it to disallow dragging the map edges "within" the parent wrapper. That way I can pan all over the map without showing any "dead space" inside of the container. Any ideas?
  15. 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!
  16. 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.
  17. 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!
  18. 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
  19. Hi I think a project I will be doing soon will require the drawSVG plugin to animate an svg path. I know that this is a benefit of the GSAP membership and the files are downloaded from the member area. What i would like to know is the drawSVG plugin an additional js file that will need to be included in the creative and therefor its file size or is it included in the file size exclusions that GSAP generally benefits from. thanks
  20. 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
  21. 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
  22. 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
  23. 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.
  24. 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 ?
  25. 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?