MotionPath Infinity Tween

[awazigh]

Hello Everyone,

In a previous post @Cassie kindly helped me to fix a symmetrical animation that I'm trying to convert as an infinity (symbol) animation, it's kind of work but I can't make the each of the 10 circles scale down smoothly in the middle of the symbol and then scale up on the 2 extremities.

@Cassie if you stop by, love would your help on this ?

 

Many thanks

Awa

See the Pen MWpGmzb by awazigh (@awazigh) on CodePen.

[GreenSock]

You could create 2 separate tweens for the scale and just repeat: 1, yoyo: true to make it go up and then back down twice: 

See the Pen QWprqjR?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Is that what you're looking for? 

[PointC]

Is this what you needed?

See the Pen 506ed5bf29a6104fde94660ba316da90 by PointC (@PointC) on CodePen.

 

Happy tweening.

 

 

[PointC]

Whoops. Looks like Jack already posted. 

[awazigh]

Many thanks to both of you @GreenSock @PointC much appreciated it, this community is just amazing ?

[awazigh]

@PointC @GreenSock an additional question plz: I forked the version from Jack for some adjustments, but I'm struggling to get the card in "front" on top on the others, weirdly sometimes they are correctly on top at the beginning and then it's broken.

I tried playing with the "zIndex" but no luck, what do you think?

See the Pen jOBxGoq by awazigh (@awazigh) on CodePen.

[GreenSock]

zIndex can only be integers and you're only having it tween from 0 to 2, thus there are really only 3 options (0, 1, or 2) over the course of the whole animation but you have 10 elements. So try animating to a bigger zIndex so there are more variations. Like 20 or 200. Does that help? 

[awazigh]

41 minutes ago, GreenSock said:

zIndex can only be integers and you're only having it tween from 0 to 2, thus there are really only 3 options (0, 1, or 2) over the course of the whole animation but you have 10 elements. So try animating to a bigger zIndex so there are more variations. Like 20 or 200. Does that help? 

cristal clear thank you ??