Search the Community
Showing results for tags 'drawsvg'.
Found 163 results
-
I've got a strange problem with DrawSVG animating an SVG graphic I made. The graphic seems to be animating at a speed much faster than the duration setting. TweenMax.fromTo(".flourishsvgclass",6, {drawSVG:0}, {drawSVG:"102%"}); This *should* take 6 seconds, but it's over in about 1. The only thing that I'm doing that's slightly different is that I'm declaring the SVG as a javascript variable. But I'm not sure why that would make any difference. You can see the issue in this Codepen: http://codepen.io/Bangkokian/pen/yNqVGr Any idea why it's ignoring the duration? -
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
-
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.
-
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.
-
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!
-
Any idea on how to animate the circle with DrawSVG plugin, from 360 to 0 forwards, and not returning backwards?
-
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
-
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.
-
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.
