Jump to content
GreenSock

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

Search the Community

Showing results for tags 'drawsvg'.

  • 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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi, I've trying to achieve something and I'have read plenty of gsap forum threads on the subject without finding the solution. On the codepen you can see that some words are surrounded by a svg path stroke, I'm trying to animate that line, like a line drawn by a pen around a word. But it looks like the path length is not correctly calculated by GSAP (?), I first thought about a browser inconsistency (as read in other threads), but it's doing the same on all browsers. The problem is fixed by removing preserveAspectRatio="none" on the svg element, but obviously it's not what I try to do. You can see the end line is drawn at the same time as the start line. Not really sure if it's doable as I really checked all around the forum, if someone has another way to achieve this and keeping the flexibility of resizing the path to the word width and height. Thank you
  2. Hi there! I am attempting to animate multiple line dash svgs in multiple sections of a horizontal scroll container, but I am only successful with doing this on the first one. Similarly, what is the most performant way to do this in the view dynamically? My initial thought is to store the SVGS in an array and loop through the array to render them in the template, but perhaps there is an easier way to do this with GSAP. I would also assume that I could keep the same type of drawing in animation but would need to tweak the starting and ending position in each section. Maybe the better way to do this is trigger via an element verses the container? Any help would be greatly appreciate. Thank you!
  3. Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks
  4. Hi GSAP champs, Soon, I'm going to start working on a project which is a product landing page full of GSAP animations. So, currently we're planning to go with GatsbyJs & one an only GSAP. The animations required in that landing page: DrawSVG ( is it free?) Pinning ScrollTrigger So, I wanna confirm that does GSAP & GatsbyJs have full support for the GSAP, I mentioned above ? any useful resource or help or guidance would be appreciated. Thanks
  5. I have this pen working and have added the code to WordPress. The SVG is appearing but not drawing. Sorry, I don't have a live example worked up yet. I've added all the code where it needs to go. There is an existing GSAP animation so I plugged in the JS in the same file, the CSS in the stylesheet, and the drawSVG plugin link where the Tweenmax link is. I've also added the CSSPlugin link, and am not sure if that is needed. I'm using the <path> element only. The SVG image code is placed in a WordPress text widget running the newest version of WP. Funny that the image will show on the front-end but when I navigate back to the text widget the SVG code does not remain in the text widget. When I inspect for the SVG, it's code is in the html, yet there is not JS error in the console. What could I be missing? Are there any known issues with WordPress and drawSVG?
  6. Hi there, I would like to have the same effect as on this tutorial: https://codepen.io/PointC/pen/c07761a17f94434f1229e11e798f1a3d Everything is going well, except the drawing of the dashed line. I think I took all the necessary information, and even when I'm copying the code from codepen, the dashed line will not show up. If is remove the part 'mask="url(#theMask)"', the dashed path is showing up. Can somebody please help me? Thanks in advance! Below the result of my code:
  7. Hey guys I have a question and I wanted to know if this is possible to do. I have a timeline with a ScrollTrigger gsap.timeline({ scrollTrigger: { trigger: element, scrub: 0.5, start: 'top bottom-=15%', markers: true } }) .to(element, {yPercent: -100}) .from($(element).find('.heading'), {yPercent: 20}, '<') .from($(element).find('.description'), {yPercent: 20}, '<') .fromTo($(element).find('.svg-path'), {drawSVG: "0"}, {duration: 1, drawSVG: "100%"}) .to(element, {opacity: 0}, '>-0.2') On this timeline I have multiple tweens, one of those is a drawSVG, but I don't want that svg animation to be attached to the scroll, so basically I just want the animation to appears once the svg is on the viewport. It's there a way to separate that single tween from the ScrollTrigger scrub? Or do I have to make another ScrollTrigger just for that drawSVG animation?
  8. Hi all, I am new to using ScrollTrigger (experience with GSAP library - which is awesome btw!). I am trying to trigger an SVG to draw in and draw out depending on the scroll position. I don't want the animation to be dependent on the scroll position so have set Scrub to false, so it triggers the full aniamtino to play on trigger. This working when scrolling down the page. How do I go about doing the same in reverse - so when the user scrolls back up the reverse happens and the svg draws back in and out. And any advice on tidying up the chaining/animation triggered would be great too. Any help would be really appreciated
  9. Hi guys, I'm trying to use the DrawSVG plugin for the first time, and I can't get it to work (ie nothing is animating, my SVG just loads in full straight away and does not animate at all). Clearly there is something I am missing, but I cannot for the life of me work out what it is. Before I throw my Mac out of the window I thought it would be best to ask for help Thanks in advance, Keith
  10. So I am using relative values yPercent:"+=80" to move my 3 bubbles based on which the user chooses to reveal or not. They work fine sometimes but after playing around with it a bit, they start to act in strange ways, am I missing something in my method? If this is not clear or something I made too complicated please let me know! thanks for the help ;)
  11. Hello! New here and new to gsap so apologies if I break any rules. I've been staring at this for a while and just might need a new set of eyes. For some reason the paths are drawing super fast. If I change the duration to something like 6000, some move normally, others are suuuuper slow. Could anyone take a look?
  12. Guest

    Draw SVG and Dashed line problem

    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
  13. Hey all, I have an issue with drawSVG, How can I change direction of animation? I mean right now it starts from right to left, but I need from left to right. I read a lot of related questions, but they were about from 0% to 100%, but what about 100% to 0%? Also I read about using Adobe Illustrator and changing path direction there, but it's not comfortable. Thanks in advance!
  14. I am try bring an SVG element to the front of the dom within the timeline. At the moment all the elements animate in the order of the html. Is there a way to bring elements to to the front? If you uncomment the the .fromTo tween in the middle of the timeline it will become clearer what my issue is. The white drawSVG path doesn't come to the front after setting the ZIndex. Thanks
  15. This solution is fixed. I had to add "-=0.3" speedup to my timeline when all I wanted was the second animation(and 3rd) to start RIGHT after the first animation ended. I looked in the past questions/forums. The only answer was the easing was causing this delay... but my solution has no easing. Going forward I would like to understand why they timeline doesn't play automatically when previous tween finishes.
  16. Hello, I found out about Greensock some days ago and immediately started using it. I think is really cool but I have some issues with some specific tasks. I am trying to: - Draw an svg line in portions as you scroll. (using also scrollmagic here) - Have a circle that will follow the svg line as it draws. (If I manage to do this, then I want multiple circles in a group follow the line as it's being drawn). From my codepen you will see not a perfect way to draw the line which I think I can make it better but my main issue is with the circle follow the svg. As a first step, I am just trying to follow the SVG (not the line as it's being drawn) but using the MorphSVGPlugin.pathDataToBezier to get the path of the svg, the return path does not really follow the svg. I think maybe my SVG needs more points so that the bezier path is more accurate but I am not sure if this is the case here. Also I would like to know for ideas if I am thinking this solution completely wrong and there is an easier way to accomplish what I need. Thank you,
  17. I have the animation working on one checkbox but whene i add another both play. This should be simple to resolve but i can't figure it out. I am trying to have it so the document is looked over for the checkboxes on the page an invoke the animation on individual checkboxes.
  18. gsap.fromTo( node, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 5 } ); Hi GSAP! I'm having a problem with the DrawSVGPlugin in which a gap is appearing in the middle of my path as it's being drawn. I came across a thread from 2014 which seemed to describe a similar problem on FireFox to the one I'm currently experiencing, however this is occurring on Chrome (v. 86). I can't really reproduce the problem in CodePen because I'm using SvelteJS to build the app, but I'll do my best to describe it. I'm calling this animation function once the element is loaded using Svelte's bind directive: const drawGraph = (node) => { // console.log(node); gsap.fromTo( node, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 5 } ); }; When I do console.log(node)it seems to grab the entire path element fine: <path class="data svelte-1sw7grj" d="M 0,100 C 4.000000000000007,80 9.999999999999998,10 20,0 C 29.999999999999993,-10 38,48 50,50 C 62,52 70.00000000000003,0 80,10 C 89.99999999999999,20 96.00000000000001,82 100,100" style="stroke-dashoffset: 293.999; stroke-dasharray: 313.305px, 323.305px;"></path> Note: From my understanding it could be this style="stroke-dashoffset: 293.999; stroke-dasharray: 313.305px, 323.305px;" business that is causing the gap, but I'm not sure where this is being set. I figured it was set by the DrawSVGPlugin itself. I've tried the following combination of fromTo to no avail. The last one (where I go over 100%) appears to animate the first line segment correctly however the second line segment is still present. gsap.fromTo( node, { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 5 } ); gsap.fromTo( node, { drawSVG: '50% 50%' }, { drawSVG: '0% 100%', duration: 5 } ); gsap.from(node, { drawSVG: 0, duration: 5 }); gsap.fromTo( node, { drawSVG: 0 }, { drawSVG: '0% 400%', duration: 5 } ); Any ideas on what might be causing this problem based on this behavior? The bug may have to do with Svelte, but I'm not sure what I should be looking for since the path element seems to be rendered correctly. Please let me know if there is anything else I can add to make debugging this easier. Thanks!
  19. Hi guys! I tried to draw an svg path on scroll with these three plugins: ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. I did it but I really can't understand why it is drawing in reverse order. When you scroll down more than 30-35%, you will see a red ball drawing a line, but it should start from the top not from the bottom. I don't know if the problem is with line, css or any other thing. Can someone please help me with this. I really don't know how to fix it. @GreenSock
  20. GreenSock

    DrawSVGPlugin

    DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties. Watch the video The video below illustrates the many ways DrawSVGPlugin can be used and will get you up and running fast. Note that it uses GSAP 2 formatting. Demo Click through the demo below to see the various ways you can provide values to DrawSVGPlugin. See the Pen DrawSVGPlugin Values: carl click next by GreenSock (@GreenSock) on CodePen. 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
  21. Hi guys! I'm trying to make a simple weather app on Codepen and I have a hard time to make one animation with dotted strokes. I want to make these strokes to move like rain drops. I tried drawSVG first but, I found an article about a line animation using stroke-dashoffset on CSS Tricks and it kind of works. There are still dots on the sides and look not good... Here is the article: https://css-tricks.com/svg-line-animation-works/ Is there any solution for this? Thank you
  22. Hi there, I just started using Greensock and I wanted to directly add them into my wordpress site. But I'm facing with a rather confusing issue. I have a simple DrawSVG code that needs to be rendered in a page which works perfectly with a plain HTML file and javascript HTML: <svg id="Rays" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"> <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about=""/> </rdf:RDF> </x:xmpmeta> <?xpacket end="w"?></metadata> <defs> <style> .cls-1 { fill: none; stroke: #fff; stroke-width: 3.79px; fill-rule: evenodd; filter: url(#filter); } </style> <filter id="filter" x="493" y="-6" width="964" height="683" filterUnits="userSpaceOnUse"> <feGaussianBlur result="blur" stdDeviation="3" in="SourceAlpha"/> <feComposite result="composite"/> <feComposite result="composite-2"/> <feComposite result="composite-3"/> <feFlood result="flood" flood-color="#ffb64d" flood-opacity="0.35"/> <feComposite result="composite-4" operator="in" in2="composite-3"/> <feBlend result="blend" mode="screen" in2="SourceGraphic"/> <feBlend result="blend-2" in="SourceGraphic"/> <feFlood result="flood-2" flood-color="#ffba60"/> <feComposite result="composite-5" operator="in" in2="SourceGraphic"/> <feBlend result="blend-3" in2="blend-2"/> </filter> </defs> <g style="fill: none; filter: url(#filter)"> <path id="path1" class="cls-1" d="M506,4l691,656,246-221" style="stroke: #fff; filter: none; fill: inherit"/> </g> </svg> Javascript: jQuery(document).ready(function(){ var t1 = new TimelineMax({repeat:-1}); t1 .from("#path1",2 ,{drawSVG:0}); }); I included the necessary greensock files using "wp_register_script" and "wp_enqueue_script". I utilized visual composers Raw HTML and JS elements to define the above code. But the animation isnt happening and there is no error on the console either. Following are my enqueue scripts: wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js' ); wp_register_script( 'TimeLineMax', get_template_directory_uri() . '/greensock/TimelineMax.min.js' ); wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js' ); wp_enqueue_script( 'TweenMax' ); wp_enqueue_script( 'TimeLineMax' ); wp_enqueue_script( 'DrawSVG' ); Simple Tweens such as changing filter to inherit is working fine with the SVG but animations like MorphSVG and DrawSVG seems to do nothing. Am I doing anything wrong or am I missing something. Any help would be great! Thank you in advance!
  23. I am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape. Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!
  24. I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users. Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the start point of your DrawSVG animations. I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location. Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. You can now export the SVG. Here’s the difference with DrawSVG. You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn. Here’s the difference with MorphSVG Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it. I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone. There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.
  25. Hi! I have a problem using draggable plugin with DrawSVG plugin. I have a clock which I can drag to move hands. When I release (dragend), a timer is starting. But if I want to update timer when timer is in progress, I can't reset svg. So more I update, more the svg decreases quicky. Do you have any idea? Thx a lot I'm sorry i don't know how to import libs on codepen... :/
×