Endpoint of stroke is wrong

[roogud]

Hey all.

 

So I'm trying to animate a part of my logo (the infinity sign). What I eventually want to do is to animate the infinity sign on hover. But I'm just setting everything up and seeing if it works. However, it looks like the endpoint of my infinity sign is the actual endpoint of the stroke. You can see it on my codepen. Can someone help me figure out how I can make the startpoint be the leftMostPoint and have the endpoint be the rightMostPoint?

 

Thanks!

See the Pen xJgQEj by roogud (@roogud) on CodePen

[PointC]

Hi @roogud 

 

Welcome to the forum.

 

I think you may have to rework your path. I forked your pen and changed the stroke to 1px. Watch the animation and use the scrubber. See how the path animates the shape, but then goes over itself again? It looks like there are two identical paths mashed into one. I'm not 100% sure what you're going for here, but that's probably not going to produce the desired results.

 

See the Pen rrYzMx by PointC (@PointC) on CodePen

 

 Hopefully that helps. Happy tweening.

 

[roogud]

Ah okay. Yea, I'll probably have to recreate the stroke. Thanks

 

But the plan is to animate a full loop on hover. So it the stroke starts at 100% and then on hover it goes to 0% and then again to 100%. And I'm hoping that the "gap" will act like a mask. Do you think it would be better to have a fully connected infinity symbol and just use offset or would this work?

[PointC]

Do you mean it just draws itself off to 0% and then starts again from the same end? Like this?

 

See the Pen pZdrZg by PointC (@PointC) on CodePen

 

Does that help?

 

Happy tweeing.

 

[roogud]

Exactly like this!

 

Thanks so much for the help!!

[roogud]

I'll look at your code for reference

[PointC]

Happy to help.

 

I added a mouseenter event for the hover. It also checks to see if the timeline isActive() so you don't interrupt the animation with rapid hovers. If you're not familiar with the isActive() method, here's some more info:

 

https://greensock.com/docs/TimelineMax/isActive()

 

Happy tweening.