Jump to content
Search Community

MotionPath Infinity Tween

awazigh test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

@PointC @GreenSock an additional question plzI 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

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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 👍🏽 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...