Search the Community
Showing results for tags 'drawsvg'.
Found 163 results
-
Wanted to document this in the event that someone comes searching. I was injecting an Illustrator SVG into the DOM via JavaScript, and the animation for polylines would get to about 80%, and then immediately jump to 100%. After playing w/ CSS properties, I found the root of the issue. Illustrator dumps out SVGs with a lot of linebreaks. I was escaping the carriage returns in JS like so: Removing the carriage returns smoothed things out immensely and all is good in the world.
-
Hello guys, Is it possible to animate an external file .svg (not the code) with the DrawSVG Plugin? My real problem is that I need to place this .svg file as background responsive and I can't find a way to do it if it is a code inside the html file. If I put as code the animation works but I can't control the position like I do with the image. HTML: div <div class="bgcover" id="outlines_intro"></div> CSS: Code I use to insert the file: div.bgcover { background: url(../img/cover.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; left: 0; width: 100%; height:100%; position: fixed; } JS: That's the javascript line that doesn't animate my svg background: TweenMax.from ("#outlines_intro", 5, {drawSVG:"100% 100%", ease:Expo.EaseOut}) Thanks, Leandro
-
Hi, I'm trying to do a simple "check" SVG animation. Why when I replace TweenMax with TweenLite, half of the stuff is not working? Do I really need to load a 100KB+ js for this? Let me know. Thank you.
-
Any idea on how to animate the circle with DrawSVG plugin, from 360 to 0 forwards, and not returning backwards?
-
Hi, I have a suite of icons that I was considering doing the gradually drawn line thing to using DrawSVG. Thing is, they are all outlined SVGs, no stroke. Am I right in thinking that this won't be possible. Is there any way to convert if this is the case? See Codepen for example. Thanks!
-
I have relatively big SVG that I'm animating with TweenLite - drawSVG. The problem is I can't make it going smoothly - it always being slow and intermittent first 1-2 seconds and proceeding fine on 3-4th second. I've tried adding delays to make it wait until the whole page is loaded, but it doesn't give much difference. Also tried renaming 50% of .style0 classes in SVG into another class and making it non-animated and visible from the beginning - not much difference as well, first 2 second of loading are still laggy. I'm looking for a way to make it smoother without editing SVG itself. I'm using the following code to animate it: jQuery(document).ready(function($){ TweenLite.set(".style0", {visibility:"visible"}); var tl = new TimelineLite(); tl.fromTo(".style0", 4, {drawSVG:0}, {drawSVG:"102%"}, "-=1"); TweenLite.render(); });
-
Hey there. Seem to be having some issues with the draw SVG plugin on IE when trying to animate a circles stroke around a central point to fill up the background. The Problem only occurs on IE When the dial type animation becomes glitchey. The Codepen example shows this.
-
Hi, This issue has been bugging me for the past few hours, but I've managed to point it down to the new lines Illustrator adds to SVG files when there are a lot of points and the lines become too long. Maybe it's an option I've been overlooking and I can turn this behaviour off, anyhow these new lines Illustrator adds on points changes the start/ending positions on SVG paths. I've added a codepen, the SVG file gets injected on the place of the img tag with an modified version of SVG Injector (https://github.com/iconic/SVGInjector) I'm not sure if this is a GSAP problem or a bug in Chrome. But it might be worth looking into. Kind regards, Mark
-
Hi, im noobish, trying to include my first DrawSVG Animation in my existing website, which uses jQuery for a page-slide in for mobile. Ok, the DrawSVG Animation does not work when i just include all necessary GSAP plugins/scripts. As soon as i remove jQuery, the svg-animation works fine. Right before my closing body tags theres this script: <script src="js/jquery.pageslide.min.js"></script> <script> $(".open").pageslide(); </script> i tried just with: <script type="text/javascript" src="js/greensock/jquery.gsap.js"></script> <script src="js/jquery.pageslide.min.js"></script> <script> $(".open").pageslide(); </script> and lots off other stupid things... Could someone please help? thx in advance! P.S.: the website where the problem is: http://www.bertelot.de/ux.html if you resize your screen to about smartphonesize ( or use a smartphone) you can see that the menu icon doesnt do anything the other sites work http://www.bertelot.de/work.html
-
Hello, I want to start using the DrawSVG plugin on my pages. I downloaded the latest version of GSAP and placed the files where they need to be. What do I need to do to my html page in order to start playing and experimenting with the basic elements of DrawSVG? thanks
-
Having some issuis with DrawSVG in FF34. The Path does not get drawn fully. Other browsers are ok. Could have to do with the getLengthProperty problem in FF. Experimented with several pathes, that hade this strange behaviour. Some could be fixed by rearranging the points of the pathes, for what reason I can not see. The example in the pen seems to be ok with its path. The gap seems to be between the 0th nd first Point of the path.
-
Hi, After 3 hours testing your amazing new plugin, DrawSVG, I may have found a little bug... As you can see here : http://codepen.io/anon/pen/emJNGR the shape's lengths are not correctly detected. The second and third icons are fully drawn before the end of the tween. Any clue on a way of solving it ? Thanks for your help.
-
More details For more detailed usage notes please consult the DrawSVGPlugin API documentation. The docs are loaded with tons of info that will help you get the most out of DrawSVGPlugin. Get your hands on DrawSVGPlugin DrawSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. To learn how to include DrawSVGPlugin into your project, see the GSAP install docs. Try DrawSVGPlugin for free on CodePen! There's a special [fully-functional] version of DrawSVGPlugin that we link to in our DrawSVGPlugin CodePens, so feel free to fork any of them, add your own SVG graphics, and take DrawSVGPlugin for a spin. CodePen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins. Demos DrawSVG Showcase DrawSVG How-To Demos- 6 comments
-
- 4
-
-
-
- svg
- line drawing
- (and 4 more)
