Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?


Member Since 18 Jun 2013
Offline Last Active Today, 02:13 AM

#72354 Animating SVG circle strokes from the 12 o'clock position with DrawSVG

Posted by PointC on Yesterday, 06:32 PM

Hey fellow GreenSockers. I was going to post this in the SVG Gotchas thread, but this question is asked a lot around here so I thought maybe a new topic would be the way to go.


SVG circles start at 3 o’clock and most people want to animate the stroke from the 12 o’clock position. Conventional wisdom would tell you to simply rotate the circle by -90 degrees and you’re all set, but there are some problems with this approach.


Using GSAP to rotate the circle -90 degrees will work perfectly fine in Chrome and FF, but Safari will ignore that set() for some reason. (IE and Edge honor the rotation, but they have another problem.)


You can simply add a transform attribute directly to the circle like

<circle cx="500" cy="75" r="60" transform="rotate(-90 500 75)"/>

This will work correctly in Chrome, FF and Safari, but not completely in IE and Edge.


If you're animating the stroke with DrawSVG, IE and Edge need the stroke-dasharray set to 0 in the attributes or they will cause problems. If you don’t add that attribute, a regular circle will start at 9 o’clock and the circle that you’ve rotated -90 degrees with GSAP or a transform attribute will start at 6 o’clock. Strangely, if you resize the browser window to the point of the SVG changing size, IE and Edge will correct themselves. 


The only bulletproof way I see to draw a circle stroke from the 12 o’clock position with DrawSVG in all browsers is transforming the circle -90 degrees and adding the extra attributes to keep IE and Edge happy.

<circle cx="500" cy="225" r="60" stroke-dashoffset="0" stroke-dasharray="0" transform="rotate(-90 500 225)"/>

It appears that only adding the stroke-dasharray attribute fixes the IE/Edge issues, but I also add a stroke-dashoffset="0" attribute also just to be safe.


Check out the demo in all your browsers.


Hopefully this helps somebody with this type of animation.


Happy tweening.


#72343 Possible bug with rotation on SVG safari

Posted by PointC on 26 April 2017 - 11:27 PM

I've created a lot of animations with circles where I wanted the drawing to start at 12:00 o'clock and I've found the easiest way is to set the transform right when I create the circle. So, in your case:

 <circle id="svg-circle" fill="none" stroke="#EB2222" stroke-width="13" transform="rotate(-90 200 200)" stroke-miterlimit="10" cx="200" cy="200" r="72"/> 

That seems to deal with most of the browser fussiness issues for circle drawing type effects that start at 12:00 o'clock.


Happy tweening.


#72339 Rain effect using TweenMax

Posted by PointC on 26 April 2017 - 08:31 PM

Hi Damon Golding :)


Welcome to the GreenSock forum.


I think what you're doing there looks fine. If you'll be using lots of elements like that or maybe particles, you'll probably find canvas to be a better option. Check out this snowflake demo from our resident genius Blake:




Again, what you've got is fine, but you'll start hitting limits with regular DOM elements or SVGs. Take a look at PIXI (http://www.pixijs.com/)when you get a chance. That's what Blake is using in that demo. Others may offer additional thoughts and advice, but my vote would be to use canvas.


Happy tweening and welcome aboard.


#72333 How to drag SVG clip-path with GSAP draggable?

Posted by PointC on 26 April 2017 - 04:07 PM

You can add a rectangle to your draggable group that is the same size as you clip-path and set the fill to transparent.

<rect x="46" width="48" height="100" fill="transparent"/>

I've updated my pen to reflect this change.




Happy tweening.


#72328 autoAlpha not very smooth

Posted by PointC on 26 April 2017 - 03:31 PM

Hi pravissimo :)


Welcome to the forums.


Could you please put that into a CodePen demo for us? Here's some info about that.




Thank you and happy tweening.


#72327 How to drag SVG clip-path with GSAP draggable?

Posted by PointC on 26 April 2017 - 03:29 PM

Hi venn  :)


Dragging clip-paths or masks can be a bit tricky. You can create the draggable and then bring the clip or mask elements along for the ride. Is this what you wanted it to do?




Happy tweening.


#72326 stagger array ignores individuell instances

Posted by PointC on 26 April 2017 - 02:50 PM

If you're trying to make two groups that stagger their elements at the same time, I'd write it like Manfred did in his fork. If you want the .box and .box2 classes to all be part of of one array, you can write it like this:

TweenMax.staggerTo(".box, .box2", 1, { y: "+=30" }, .2);

Happy tweening.


#72287 Chrome bug: When I scale an element with background image, the image flickers

Posted by PointC on 25 April 2017 - 02:41 PM

Well, they changed their motto from "Don't be evil." to "Do the right thing."


Of course, neither motto says anything about being annoying, breaking things and making us all work a little bit harder. Maybe that's the right thing to them?  :blink:

#72235 GreenSock does not support enlarged clickable areas

Posted by PointC on 24 April 2017 - 01:22 AM

Just my two cents worth, but couldn't you just add an additional element to the SVG with a transparent fill?


Say, for example, you have a tiny 10x10 rectangle and want the draggable target to be 60x60. Create another rectangle at that size with a transparent fill, group it with the visible rectangle and create a draggable from the group rather than the original rectangle. That would give you a lot of control over the size of your draggable target.


Happy tweening.


#72228 Weird thing while rotating an SVG pie chart

Posted by PointC on 22 April 2017 - 04:44 PM

Hi GreenSnake :)


Welcome to the forum


This looks like it's only happening in Chrome so I'm wondering if you're experiencing a BBox size calculation error on that group. I posted about that here:




In your case, it's an easy fix though. Please use svgOrigin rather than transformOrigin like this:

tl.to(div, 5, { clearProps: 'transform', svgOrigin:"319 200", rotation: 360});

From what I can tell, that change seems to fix any strange rotation issues in Chrome and should give you the desired behavior.


Here's some more info about svgOrigin:



Hopefully that helps.


Happy tweening.


#72219 SVG not displaying in IE

Posted by PointC on 22 April 2017 - 01:12 AM

Hi LachlanTS :)


Welcome to the forum.


I took all the SVGs out of your CodePen and they appeared to display correctly in IE11 with no scripts or CSS so I don't believe there is an issue with the SVGs. You are loading a lot of CSS files so my guess is there is something in one of those that IE11 is not liking very much. You can try removing those and adding them back one at a time until it breaks in IE11, but I'm not sure what to tell you other than that. It's a lot to look through.


Regarding performance on mobile - you do have a lot of moving pieces and all those CSS files so that may be too much for some mobile browsers. They do have their limits. GSAP doesn't do any of the rendering. It only animates values so it's unlikely to be the source of any laggy performance on mobile.


I wish I could be of more help, but as I mentioned, you have a lot to look through.


Just an FYI - you don't need the HTML and body tags in CodePen and you should place the styles in the CSS panel rather than pasting it into the HTML panel. It's much easier to review like that too.


Happy tweening.


#72218 problem is syncing the pin and the animation

Posted by PointC on 22 April 2017 - 01:02 AM

Hi  jadekins :)


Welcome to the GreenSock forum.


This is really more of a ScrollMagic question and we have to keep our focus on GSAP problems and questions. That being said, if you can put together a demo, we can take a look and probably point you in the right direction. Here's some info about that:




You can post ScrollMagic questions here too:



Happy tweening.


#72198 GSAP + ScrollMagic and one way animation

Posted by PointC on 21 April 2017 - 01:50 PM

Hi salamandr :)


Welcome to the forum.


You just need to set your scene reverse to false like this:

    new ScrollMagic.Scene({
         triggerElement: '.magic',
         triggerHook: 'onLeave',
         reverse: false

If you have multiple scenes with similar setups, you can also set that (& other properties) globally when you create the controller like this:

var ctrl = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 'onLeave',
    addIndicators: true,
    reverse: false

Happy tweening and scrolling.


#72179 Fill svg line and show elements

Posted by PointC on 20 April 2017 - 10:18 PM

I'm not sure what you mean by fast filling. The demo you posted fills the line based on the speed of the user scroll.


As for why it's filling before the scene ending, that's what I meant by reviewing the pinning demos on the ScrollMagic site. You need to pin the section while the animation plays.


I've made a really basic demo for you. It has three sections. Sections 1 & 3 are empty, but Section 2 has a simple SVG with a line and circle. That section pins for a 50% duration while the line animates. When the line reaches 50%, the circle animates on. This is achieved by using the position parameter on the tween with the circle and setting it to the halfway point of the line tween. In this case, that is 0.5. Once the line hits 100%, the scrolling of the page resumes.




Please keep in mind that my demo uses the DrawSVG plugin I mentioned in Post #6 so you will need to make a few adjustments to your own animations if you don't want to use that plugin.


Hopefully that helps.


Happy tweening.


#72169 Fill svg line and show elements

Posted by PointC on 20 April 2017 - 06:07 PM

o.k. - I see what you're asking now.


You are using getTotalLength() to animate the strokeDashOffset of the line so you need to use that number to trigger the appearance of the hidden element. For example, if your path length is 1,000 and you want to trigger something at 50% of that line, you need to add some logic for the tween to happen when the strokeDashOffset reaches 500.


Just an FYI, GSAP's DrawSVG plugin would help a lot for this type of animation. You can then easily trigger things at certain percentages. Please check out the plugin when you get a chance.




It's one of the many cool plugins and perks of Club GreenSock. More info:




Your current setup has the page scrolling up before the line fills so I'd also recommend reviewing the ScrollMagic pinning demos.




Happy tweening.