Jump to content
GreenSock

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

Search the Community

Showing results for tags 'svg'.



More search options

  • 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

Found 512 results

  1. Hi guys! Please click once in codepen demo. I am trying to make a very simple sparkling animation on clicking anywhere in the window but unfortunately I am not able to do it. It runs only once. I want it to run whenever I click. Please help me.
  2. I am playing with spiral animation using tweenlinemax, I saw couple of examples related to spiral animation for growing text font size during animate but I also want to reduce the size of font after 1 second duration. tl.to("#Text",10,{attr:{startOffset:'100%'}}) .to("#theText", 5, {fontSize:50},2) .to("#theText", 5, {fontSize:10},1); //this is not working so is there any way to grow up and down the font size while animate on SVG path using tweens.
  3. Hello, I was wondering if is possible to change the direction in which 2 paths are being morphed. Currently, my path is being morphed from left to right, which doesn't look that great. Is it possible to modify it so that it starts morphing from the center and expand outwards? The link to my animation is https://codesandbox.io/s/confident-violet-lywmu?file=/src/Animate.js
  4. Hello, I am new to animation and SVG in general. I am using attr property to morph between 2 paths in a SVG. I created the shapes with same number of anchor points in Illustrator. The problem I am experiencing is that at the start of the animation, the path is all messed up. I am not sure if what I did is correct but how can I achieve that the starting path is the one given and start expanding from there towards the new path? I created a codesandbox showing this behavior at https://codesandbox.io/s/falling-dew-7l0cz?file=/src/Animate.js I was able to animate it correctly using different frames and a timeline, but is not as smooth. Any help is greatly appreciated.
  5. Any idea why this transformation is not working? When I use the uncommented line it is working, but I don't want to animate the whole SVG, only the red letters.
  6. The minimumMovement property to configure a Draggable can actually be a float. The docs say it's integer. This is good to know if you are dragging elements of an SVG element of just a few units high/wide.
  7. Hello, I am having a problem in making motions with Scroll Trigger. I am trying to make an SVG appear when triggered, and disappear after a few scrolls. I tried making two separate timelines for each motion, which did not work at all... ,and I have also tried using .reverse( ) or .fromTo( ) with no avail. Would any of you guys teach me how to make my SVG appear and later on disappear using the scroll trigger? To get the precise image of what motion I am trying to make: I want this appearing and disappearing to be triggered through scrolling. I am sorry, I cannot provide a codepen of my project (as I do not have the pro to upload the svg assets), instead I will clip a video of what I my current circumstance. I am trying to make the forest kinda thing sink out of the view after another stroke of scrolls. Please help me out here. Sincerely,
  8. Hi all! So I have an SVG image that is basically an outline of a Chinese letter: https://imgur.com/a/WxcxIgr and I would like to fill this in with brush strokes when the SVG image is hovered, while making sure that the strokes are confined within the outline. Kind of like this: https://imgur.com/a/AdoPnkx The brush strokes will not fill the SVG all at once, but basically as the cursor is moved over it. Can I use GSAP for this? Still pretty new to this so any pointers to the right direction would be highly appreciated!
  9. violet

    Animate SVG line

    Hello everyone, this is my first post so sorry if I'm wrong in something. I'm unable to create a Codepen but I've created a Codesandbox, I hope it's good anyway. What I want to do is very easy: animate an svg line tag. So I created a tweenMax.to animation but it seems not to work. Why? export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => { const lineRef = useRef(null) useEffect(() => { if (lineRef.current) { TweenMax.to(lineRef.current, 1, { x1: x1, y1: y1, x2: x2, y2: y2 }) } }, [x1, y1, x2, y2]) return <line ref={lineRef} x1={x1} y1={y1} x2={x2} y2={y2} {...props} /> } When I run it, I get:
  10. GreenSock

    MorphSVGPlugin

    MorphSVGPlugin morphs SVG paths by animating the data inside the "d" attribute. The video explains more (but uses the GSAP 2 formatting): It has never been easier to morph between SVG shapes. First, let's cover what this new plugin can do: Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches. Morph a <polyline> or <polygon> to a different set of points There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM. Draw the resulting shape to <canvas> (via a render function or set a MorphSVGPlugin.defaultRender) Use either linear interpolation (the default) or a newer "rotational" type to get more natural looking morphs Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the inbetween state looks like during animation. Instead of passing in raw path data as text, you can simply feed in selector text or an element and the plugin will grab the data it needs from there, making workflow easier. How does it work? MorphSVGPlugin does a ton of heavy lifting so that you don't have to. You can morph a circle into a hippo with a single line of code: gsap.to("#circle", {duration: 1, morphSVG:"#hippo"}); API MorphSVGPlugin needs to know what shape to morph to (and optionally which shapeIndex to use). When only specifying a shape, MorphSVGPlugin can take a wide range of values. Selector string gsap.to("#circle", {morphSVG:"#hippo", duration: 1}); An SVG element var endShape = document.getElementById("hippo"); gsap.to("#circle", {morphSVG: endShape, duration: 1}); Points for <polyline> or <polygon> elements: gsap.to(“#polygon”, {morphSVG:"240,220 240,70 70,70 70,220", duration: 2}); Strings for <path> elements gsap.to(“#path”, {morphSVG:"M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10", duration: 2}); *Note: if the shape you pass in is a <rect>, <circle>, <ellipse> (or similar), MorphSVGPlugin will internally create path data from those shapes. shapeIndex The shapeIndex property allows you to adjust how the points in the start shape are mapped. In order to prevent points from drifting wildly during the animation MorphSVGPlugin needs to find a point in the start path that is in close proximity to the first point in the end path. Once that point is found it will map the next point in the start path to the second point in the end path (and so on and so on). Due to the complexity of vector art there will be times that you may want to change which point in the start path gets mapped to the first point in the end path. This is where shapeIndex comes in. In order to specify the shapeIndex you need to use an object {} with shape and shapeIndex properties. The following code will map the third point in the square to the first point in the star. gsap.to("#square", {morphSVG: {shape: "#star", shapeIndex: 3, duration: 2}}); findShapeIndex() utility Experimenting with shapeIndex can be a bit of a guessing game. To make things easier we have created a stand-alone utility function called findShapeIndex(). This function provides an interactive user interface to help you visualize where the start point is, change it and preview the animation. You can load findShapeIndex() from: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js Once its loaded you simply tell it which shapes to use. findShapeIndex("#square", "#star"); Or pass in raw data: findShapeIndex("#square", "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"); The best way to get started is to drop your SVG into the pen above and alter the IDs to match your svg. Be sure to watch the video above which clearly illustrates how shapeIndex and findShapeIndex() work. Additional Notes shapeIndex only works on closed paths. if you supply a negative shapeIndex the start path will be completely reversed (which can be quite useful). Converting SVG shapes to paths Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle> or <rect> or <ellipse> or <line>? No problem - just tap into the utility method and have the plugin do the conversion for you: MorphSVGPlugin.convertToPath("#elementID"); You can pass in an element or selector text, so you could also have it convert ALL of those elements with one line: MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); This literally swaps in a for each one directly in the DOM, and it should look absolutely identical. It’ll keep the attributes, like the “id” attribute. So after the conversion, you should be able to target the elements pretty easily, just as you would before. <!-- An svg Like this: --> <rect id="endShape" width="100" height="100" fill="red"/> <!-- becomes --> <path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path> Rotational Morphs? Canvas? Documentation View the official docs here for a full breakdown of the API. Demos MorphSVG Showcase MorphSVG How-To Demos Get your hands on MorphSVGPlugin MorphSVGPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download MorphSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. Try MorphSVGPlugin for free on CodePen! There's a special [fully-functional] version of MorphSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin 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.
  11. Hi everyone! Sorry, if the answer is already there, but I couldn't find it. I have 2 SVG tags. 1) Source SVG sprite with 2 <rect> shapes. 2) And the second SVG is pulling elements from the first SVG with <use> tag. The task is to move both shapes from the source SVG to the same point (x, y) using your library. Now they are moving together and to different points. Thanks for your attention, and any help would be greatly appreciated. Thank you!
  12. Hi all, I'm new with GreenSock and quite happy with I've done until now with it! I've to do a animation through a path. All seems right up to here. But it needs to be responsive. I mean, as the path adapts to the width of the screen, the animation should also adapt. Is it possible to do this with GS? Any help will be really apreciated. Thanks!
  13. Hi, I'm creating a simple polygon svg shape, and using it to mask an image using the clip-path:url(#id) method. I'm then trying to animate this using GSAP. This works fine, except in FireFox, where no animation occurs. This can be viewed at this codepen: http://codepen.io/rorytawn/pen/OVeWNB. All I'm trying to animate is simple 2D transforms like x and scale. I know FireFox has some issues with clip-path, so I tried animating the same shape, when it is not used as a mask, and that works fine in FireFox. So the issue is something to do with animating the svg when it is assigned to clip-path. I tried another example using GSAPs AttrPlugin, which does work in all browsers including FireFox. Codepen here: http://codepen.io/rorytawn/pen/MwMbVx. But as far as I'm aware, this won't allow me to animate using css features, rotation, skew etc. If anyone can please point me in the right direction to get the first example to work in FireFox it would be much appreciated! Many thanks!
  14. iman

    draggable over path

    hi guys i want drag element over path and didn't success. anyone can help me ? whats my mistake.......!!!!!!!???
  15. Hi. Amazing lib, just became a club member and i'm having a lot of fun trying it out. I am trying to recreate this pen on a create-react-app product. I would like to know if there is an analogous function in the motionPathPlugin that would return the array of objects i need (that was provided by MorphSVGPlugin.pathDataToBezier) in the pen attached.
  16. Hi! I am working on an SVG handwriting effect. I've got it to work but I can't figure out how to make it not show the "crossing" points of the letters as shown in the codepen. Also, I need the final SVG animation to have a gradient such as in the image below but can't figure out how to change the color of the stroke which is currently black to a gradient. Hope my questions make sense. Thanks!
  17. Hi, I'm trying to get an effect of a collection of shapes to come together and fit together (though some of the paths need a clean up 😅) I have made a few simple ScrollTrigger animations and can arrange the shapes into where they should be / the general animation however.... I'm really stuck on how to get the shapes on the bottom on the vector to act as a mask for the background image the animation is placed upon. I'm able to make a compound path a set the mask but wondered if anyone had any ideas around how I would be able to mask as well as animate the shapes independently (as they are moving on the y-axis at different heights). Any help would be appreciated!
  18. Hello! I am working to reveal this shape/outline via a mask ...specifically the rectangle shape, as it animates via motionPath the shape should reveal. This pen is set up to show the rectangle animating along its path (.path2) successfully, but when I place it within a mask ("theSquare"), motionPath breaks. Commenting in <defs> and <mask> within the linked pen will replicate the error. Can you help me understand why this is happening? Thank You!
  19. The circle move along the path with animation in this example. But how to do that with draggable plugin, drag the circle along the path.
  20. Hi there, Loving GSAP and worked with it on a few projects! I'm trying to create an intro animation for one of our apps using SVGs. In the past I was able to make it work without lag before, but for the life of me I can't get it to be smooth on a full screen. I've tried animating x/y properties instead of top, etc. The result is the same. It needs to adapt to screensize that's why I use vh for tweening. Does anyone have tips for me please? I've attempted many things that don't seem to work and I'm just worried i'm going at this all wrong maybe... The reason the SVGs are wider than the screen is that there are horizontal movements between different pages on our web app. PS. should try keep the screen height as big as possible to see the animation properly. Regards
  21. I'm trying to apply a scrub/scrollTrigger to an animation, if I exclude the ScrollTrigger I can get a smooth animation in the tl but applying ST transforms it to on/off with no transistion. It is code borrowed & butchered from the talented and helpful of this forum so apologies for the state of markup, lot of rooting around trying to make sense of things. What i want to achieve is an 'onload' animation - SVG expands - which is then reversed on scroll & scrub, some animation I can get to work thanks to the ST video, which made it look too easy Thanks for any pointers on my mistakes, it is apparently a great education...
  22. Hi! I just started using the MorphSVGPlugin and I was wondering if I can change the transform value of the path. This is because the viewBox normally is not the same. But to use the plugin I thought I needed the paths to be inside the same SVG tag. Is there any way to change the transform value or the viewBox? For your information I am using ReactJs for this project.
  23. BFreakout

    Fill a bottle

    Hello Community, I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this? Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here. bottle.svg
  24. Hello Everyone I'm struggling with something that I'm not sure if it's trivial, impossible or I'm just doing it wrong. I've checked everything that I could find about .getBoundingClientRect() .getBBox() and I realized that you recently released an suuuuperb update with .convertCoordinates() and a lot of cool stuff. Though I feel a bit silly trying to use it. Or maybe it's way complicated due to 2 different SVGs and their coordinates systems. Please let me know if it's possible to put that blue box over the green one but specifically to #align-line (so the top of the blue box is touching the line) After 6hrs of doing something similar as blue box is doing in the attached CodePen demo and demystifying some awesome @OSUblake demos I would very much appreciate some guidance on this one. Why I have to do this in such way - I have a mask element (a card that comes out of envelope) and it has to be aligned with the envelope - otherwise the animation is a no no - but later I need to position it (card) anywhere on the screen, so the elements must be separated, but in sync - they will also have dynamic sizes and widths depending on the needs and all the stuff wouldn't be much of a problem if not that one sync issue. Hopefully I'm just being silly and it's possible, If not, well I need to rethink the whole thing BTW Thanks for the awesome update! Cheers, Patryk
  25. I'm kind of stuck on how to approach this problem. I have a timeline that is showing a primary SVG image, I'm trying to find a way to swap the SVG for another as a part of the timeline, and then continue the animation.
×