Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
awazigh

MotionPath Infinity Tween

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

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? 

  • Like 4
Link to comment
Share on other sites

Whoops. Looks like Jack already posted. 

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
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.

×