Jump to content

Search the Community

Showing results for tags 'drawsvg'.

  • 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. TweenMax.staggerFromTo(counterElement.find('g path'), details.speed, {drawSVG:"0", ease:Sine.easeOut}, {drawSVG:details.percentage+"%", onUpdate: function(){console.log(this)} }); The animation works correctly. The onUpdate is working either. Now I want to get the current percentage of the drawSVG in the onUpdate. I looked in the this result object, but can't find any variable with current percentage. How to achieve this?
  2. Can someone help me fix my code or point me at a tutorial? I've been unable to find code that works in my searching and I'm still pretty new to GSAP. I'm trying to get a DrawSVG line animation to happen from 0 to 100 on hover of a button and then when the mouse leaves the button I want the animation to go back from 100 to 0. I'm also having trouble getting the line to start at 0. When the page loads the line is at 100. Here's my codepen: http://codepen.io/aaronsleeper/pen/JGgVzr And here's my current script: $('.btn').hover(highlightOver, highlightOut); function highlightOver(){ TweenLite.from($(this).find('.highlight'), 0.3, {drawSVG:0,ease:Expo.easeOut}); } function highlightOut(){ TweenLite.to($(this).find('.highlight'), 0.3, {drawSVG:0,ease:Expo.easeOut}); }
  3. I just want to animate this svg left to right, however, no transition is happening. Not sure why. The SVG is just exported from Illustrator. Thanks in advance.
  4. I am new to the DrawSVG plugin. I have researched the API and it is easy to use and understand. Good job guys! I am trying to create the Google Material spinner as demonstrated here http://codepen.io/mrrocks/pen/EiplA However my version isn't working out quite nicely. http://codepen.io/vennsoh/pen/yexzVg Here is my intent: spinnerTimeline.fromTo("#circle", 1, {drawSVG:"20%"}, {drawSVG:"20% 100%"}) <-- A .fromTo("#circle", 1, {drawSVG:"20% 100%"}, {drawSVG:"20%"}); <-- B A: Grow the stroke from 20% to 20% 100%. B: Shrink the stroke back from 20% 100% to 20%. However B is taking the shortest path to do this instead. How can I tell DrawSVG to go the other way round if you know what I mean?
  5. Hello, I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines. Thanks
  6. Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give. Thanks a ton, Savana
  7. A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
  8. Hi there, I am new to draw SVG and having problem getting started. Sorry if the solution is simple. I have done tutorials and can't find the answer anywhere. Am I missing something in the attached codepen? I just want the line to draw from the top left to the bottom right. I would also like the line to appear as _ _ _ _ _ _ _ if possible. Thanks so much for any help, Phil
  9. Hey - I was reading an article by Sara Soueidan about grouping and reusing SVGs, so I thought I'd try implementing that on an animation I had already completed. Here's the original, using individual <line> elements: http://codepen.io/flysi3000/pen/XmaqBQ The new version with a reused <symbol> is here: http://codepen.io/flysi3000/pen/YwKedE. As you can see, the svg lines aren't rendering as expected at all. Wondering what I'm doing wrong? SVGs are still kind of mysterious to me, so any help would be greatly appreciated!
  10. Hi All, I'm working on a custom radio checkbox using drawSVG and am having a bit of trouble getting my animation to play more than once. I'm thinking that resetting the timeline once the animation is completed is how it should be done, but I'm not able to quite figure that out. Please see the Codepen ( details. Thanks! Ryan
  11. Any idea why the path isn't starting at the 0 point and ending at 100?
  12. Hi Again i have a problem and i need help. I have written a code to animate svg on hover and it does so also but the problem is when i quickly hover again and again it redraws and looks broken i looked in jquery they have something .stop(true, false) with .animate but which cant be used as i am using greensock and it works differently so i tried with pause but its just pauses the animation. I have looked in forum and found this but i am not sure how can i +=20 with SVG http://greensock.com/forums/topic/8786-equivalent-of-jquery-stop/ I hope i have created a proper codepen this time. Thanks, Fahim
  13. Hi, I was just testing out DrawSVG on Codepen for the first time. I was animating a circular stroke, and I couldn't figure out how to make the animation go counter-clockwise, instead of clockwise. What would be the best way to achieve this? Any suggestions are appreciated!
  14. Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!
  15. Hello, I have a short animation made using the DrawSVG Plugin. There's a lighting bolt in the middle. Problem is, it shows a long white line at the very beginning and then when in animates, it just jumps at the end to close off the object. I need this line to be invisible at the beginning and for the animation to run smoothly. Please check my Codepen URL. Thanks, -Stefan
  16. I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!
  17. Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.
  18. Hello, This is my first attempt at DrawSVG. I've got 3 svgs that appear one-at-a-time then the stroke is drawn fromTo {drawSVG:"0% 50%"}, {drawSVG:"0% 100%"} and then the y position is animated. Everything works as I expect except for the first draw. It's not honoring the fromTo position. Can you please tell me where I've gone wrong. Thanks
  19. 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?
  20. 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
  21. 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.
  22. 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.
  23. 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!
  24. Any idea on how to animate the circle with DrawSVG plugin, from 360 to 0 forwards, and not returning backwards?
  25. 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(); });