Jump to content
Search Community

MotionPath Symmetrical possible?

awazigh test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi Everyone,

I'm trying to create a 2 symmetrical animations using MotionPath but can't achieve the expected result. I used alignOrigin and offSet to adjust a bit but I'm pretty it's the not the right way to do it.

Any direction using MotionPath for such case is greatly appreciated.

 

Thanks

Awa

See the Pen zYZPPZx by awazigh (@awazigh) on CodePen

Link to comment
Share on other sites

My initial was to use motionpath on purpose to easily create the SVG ellipse without having to set x & y values for each card.

Did I miss something here?

(indeed blur is pretty heavy consuming, I'll drop it out, thx)

Link to comment
Share on other sites

It's not wrong necessarily! There's no wrong solutions. If it works and that's how you want to approach it that's ok - I just think I would have approached it with transforms.
 

Motion paths might make it easier really! I think this is what you're after?

See the Pen 7b02fff60c68d94f50176c10ba40bfe4?editors=0010 by cassie-codes (@cassie-codes) on CodePen

  • Like 4
Link to comment
Share on other sites

Yep, I understand that - I took the opacity and scale out so it was easier to see what was going on. I just fixed the motion path direction so it was symmetrical.

You'll still need to align them how you'd like and add the opacity and scale back in.

Link to comment
Share on other sites

hey @Cassie thanks for that, I added the scale and opacity back but totally lost the effect of spinning from back to front, I probably missed something in your version.

Any available similar example you could have in mind using motionpath or as you suggested only transforms?

Link to comment
Share on other sites

me again! I've updated my pen with 2 different paths "left" & "right", however I've tried multiple configurations to play with the "zIndex" to make sure the cards are stacked correctly, but can't fix it...

anyone experienced same kind of situation?

  • Like 1
Link to comment
Share on other sites

  • Solution

Sure thing!

They're starting and ending at different points on the path - If you want them to start off and end at the same places but go in opposite directions you'll want to use the same values but negative for one and positive for the other.

Your timelines are doing basically the same thing for both groups of cards too, so you can abstract it out into a function to save accidentally changing one and breaking the symmetry ☺️ 

I changed the cards to circles so I could see where they are on the path better.

See the Pen 75a75c683d37bf51921e4f10cd9d9a2a by cassie-codes (@cassie-codes) on CodePen

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