Jump to content
GreenSock

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

Search the Community

Showing results for tags 'morph 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 5 results

  1. Hello again guys ✌️ I´m right into the ‘basic‘ ScrollTrigger thing for quite a while now. Since I´ve upgraded myself with ShockinglyGreen, so things getting even greater with the MorphSVGPlugin, which progress of transformation can be controlled with ScrollTrigger. The Results are impressive. After playing around with this while interacting with svg elements directly in the DOM, I slightly get disturbed by the fps drops this can cause with other animations or if you get your page in bigger screen dimensions or resolutions (4K / Retina). I stumbled upon a great library called paper.js which can bring path information into canvas, which (in theory) should appear as the more performant approach, especially if you scale things up. Also the feature to group and edit things in paperscipt could be a good partner by creating for example a sweet set of dynamic fullscreen transitions without touching the DOM. The example below shows that it´s contents created with paper.js / paperscript can be changed by gsap and ScrollTrigger in a simple manner: demo It would be great to have a smart way to archive the MorphSVGPlugin behaviour inside this canvas stage which is controlled by ScrollTriggers progress. Maybe there is another general solution or it isn´t even really faster from an performance perspective than I expected. I´ll fork a simple demo to see morphSVG in action Seen on: Would love to read some thoughts from you about that Best Wishes, Richard
  2. 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.
  3. I'm trying to get the GSAP Morph SVG plugin to work. I use Animate to generate code. I'm including the plugin script file. I really can't wrap my head around how I'm supposed to set this up in Animate. I normally copy/paste existing working examples and then tweak code in my actions window. Where do I place the path files of the shape I'm morphing to?
  4. sirhclluk

    morph svg

    Does morph and draw svg only work with the code of the svg? So if I have two traditional svgs as images, can that work? Thanks
  5. bigmamainthemud

    Morph Phail

    I'm just trying to implement my own morph and I keep getting the same error: "invalid morphSVG tween value" Can someone tell me what I am missing or overlooking? This is someone else's code mostly but I'm trying morph for the first time.. just can't get it to work. Thanks!
×