Animating stroke-dashoffset works fine in CSS animation - stagger with GSAP?

[Devotee007]

Hi,

I have this code for a CSS animation of a pie chart. It works fine. 
.icon:hover .bottom  {
  stroke-dasharray: 0 100;
  stroke-dashoffset: -25;
}

But when I do this with GSAP - tl.to('.bottom', {strokeDasharray: "0,100", strokeDashoffset: "-25", dutation:.3}, 0)  the animation stagger. 

What am I doing wrong? using stroke-dashoffset: -25; was the only solution I found to reverse the animation of the pink pie part. Is there another solution?

//Devotee007

See the Pen JjBgQrO by Devotee007 (@Devotee007) on CodePen

[barthendrix]

Hi,

 

I don't see any staggering in the codepen. Looks like the javascript code is achieving the same effect as the css code?

 

And this is probably unrelated, but it should be duration, not dutation 🙂

[Devotee007]

@barthendrix, don't you see the pink section jumping/staggering against the blue aqua pie bit? For me it jumps a lot. What browser do you use?

Ah, thanks! I misspelled that.

 

 

[barthendrix]

Sorry, you're right, the animation of the pink section does looks a little shaky. I though you meant staggering as in the pink section starts animating later.

 

No ideas myself, the code looks right. I hope someone else can help!

[Devotee007]

Solved it by changing stroke-dashoffset from 0 to -125

 

<circle class="bottom" cx="50%" cy="50%" r="15.9" stroke="pink" stroke-dasharray="25 100" stroke-dashoffset="-125"></circle>

 

And then this GSAP code.

const tl = gsap.timeline({ paused: true, reversed: true})
tl.to('.top', {strokeDasharray: "0,100", duration:.3}, 0)
tl.to('.bottom', {strokeDasharray: "0,100", duration:.3}, 0)
tl.to('.icon', {x:"7.5rem", duration:.3}, .1)

const playBtn = document.getElementById('icon')

playBtn.addEventListener('click', () => {
  tl.reversed() ? tl.play() : tl.reverse()
})

 

//Devotee007

[barthendrix]

Nice! That definitely solves it. You're right though, the combination of animating stroke-dashoffset and stroke-dasharray seemed a little jumpy in the original codepen.

[Devotee007]

Yes on the pink one. This solved the jumpy bit, but I can't animate in with ease now, because the pink one has a negative value, so ease-out is happens on the wrong end. 

[mvaneijgen]

Is there a new pen with the updated code or is the original one updated? 

 

The frist two tweens have the same animation, so you can also just combine those to be one tween. Also in the .icon tween it states transform: "translate(bottom, bottom)", this does nothing. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate translate wants a number value, bottom is nothing in this case, did you mean transformOrigin? And in rotation you can also direct†y call the number instead of a string "90deg" = 90

 

9 hours ago, Devotee007 said:

but I can't animate in with ease now, because the pink one has a negative value

An ease should not care about if it is a negative value or not. 

 

See the Pen PodYJve by mvaneijgen (@mvaneijgen) on CodePen

[Devotee007]

@mvaneijgen, this is the updated codepen I changed this:

 

stroke-dashoffset from 0 to -125

<circle class="bottom" cx="50%" cy="50%" r="15.9" stroke="pink" stroke-dasharray="25 100" stroke-dashoffset="-125"></circle>

After that the flickering stopped. In the video file in previous post you can see the "flickering". When I just did the animation with CSS it was smooth.

After changing from 0 to -125 the ease on the animation seem to happen backwards on the pink area. See video file in this post. Both the green and pink are has ease:"back.in" when I recorded it.

Thank you for your tip about the code, I will updated.

 

[barthendrix]

Hi @mvaneijgen

 

Here's a codepen which shows the original issue - 

See the Pen MWqgyzM by barthendrix (@barthendrix) on CodePen

 

If you uncomment the commented css lines (which handle the transition of the pie wedges on hover) and put a return at the top of the js file, the css animation is smooth. When you use the js only approach, the pink wedge has a flicker when it's animating. It seems like it's the combination of animating stroke-dashoffset and stroke-dasharray that's causing the flicker.

 

Hope I got that right @Devotee007 - and the animation is starting to look pretty cool!

[GreenSock]

It looks to me that's just because by default when GSAP animates px-based values it generally rounds them to whole numbers because in most cases the browser doesn't do sub-pixel rendering (for example, on values like top, left, etc.). You can disable it by setting autoRound: false: 

See the Pen PodoqyJ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[barthendrix]

29 minutes ago, GreenSock said:

Does that clear things up? 

Yup, that looks perfectly smooth.

Interesting to learn about autoRound, thanks for pointing that out! 

[Devotee007]

Quote

Hope I got that right @Devotee007 - and the animation is starting to look pretty cool!

@barthendrix, that was correct and thank you for liking the animation and continue the thread!

@GreenSock, thank you, now I learned something new, didn't know about auto-round. That cleared things up.