awazigh Posted June 5, 2021 Share Posted June 5, 2021 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 5, 2021 Share Posted June 5, 2021 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? 4 Link to comment Share on other sites More sharing options...
PointC Posted June 5, 2021 Share Posted June 5, 2021 Is this what you needed? See the Pen 506ed5bf29a6104fde94660ba316da90 by PointC (@PointC) on CodePen Happy tweening. 4 Link to comment Share on other sites More sharing options...
PointC Posted June 5, 2021 Share Posted June 5, 2021 Whoops. Looks like Jack already posted. 2 Link to comment Share on other sites More sharing options...
awazigh Posted June 5, 2021 Author Share Posted June 5, 2021 Many thanks to both of you @GreenSock @PointC much appreciated it, this community is just amazing ? 3 Link to comment Share on other sites More sharing options...
awazigh Posted June 5, 2021 Author Share Posted June 5, 2021 @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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 5, 2021 Share Posted June 5, 2021 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? 2 Link to comment Share on other sites More sharing options...
awazigh Posted June 5, 2021 Author Share Posted June 5, 2021 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 ?? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now