Jump to content

Search the Community

Showing results for tags 'non-scaling-stroke'.

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


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 3 results

  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 all, bit of a conundrum: I have a rudimentary globe and looking to animate a simple spin. I've decided on using scaleX and transformOrigin: "100% 50%" to just scale over to -1 and it works 'perfectly'. Unfortunately scaleX also scales the stroke—I tested vector-effect="non-scaling-stroke" but unfortunately it removes the proportion / resizing attributes that I'm relying on to keep the SVG working as intended in IE11. Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?
  3. Dear gsap friends, I've been experimenting with DrawSVG plugin. It seems that setting vector-effect="non-scaling-stroke" to a polygon makes the DrawSVG plugin go crazy. A simple animation from 0% - 100% works without the vector-effect set. Setting the attribute makes the animation go wild Any thoughts on this?