Jump to content
GreenSock

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

MotionPath Symmetrical possible?

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

I'm not quite sure what motion path is doing here? It seems like an over-complication, you could surely do this with simple scales and y transforms?

Link to comment
Share on other sites

the idea is to follow the ellipse path to create a field of depth effect, you think it's not the right direction with motionpath?

Link to comment
Share on other sites

I'd probably just use y, scale and opacity. I'd steer clear of the filters too, they're really tough on performance.

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

thanks @Cassie for taking time to review it ☺️  I'm actually trying to create a rotation from back to front (kind of depth), in your example it's rather from left to right, not sure if it's clear 🥴

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

You were originally moving them around the motion path in the same direction, between the same start and end points, and just offsetting the alignment. That's why it wasn't symmetrical. 

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

4 minutes ago, Cassie said:

Hey @awazigh,

 

Do you still need help? Looks like your updated pen is headed in the right direction.

indeed almost there, stil struggling with the positioning to get the cards stacked correctly 🤯

Link to comment
Share on other sites

all good @Cassie I solved the positioning issue, thanks ☺️

  • Like 1
Link to comment
Share on other sites

Good job!

  • Like 1
Link to comment
Share on other sites

12 minutes ago, Cassie said:

Good job!

one last question @Cassie I swear 😇  do you know the 2 animations are not playing at the same time (synchronised)? do you I need to play with the "delay"?

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

Great!! Many thanks @Cassie ☺️ aka "Rosie the Riveter" 😁  you made my day 🥳

  • Haha 2
Link to comment
Share on other sites

Ahaha, no worries pal! 🥳 

Glad we got there in the end, this was a fun one.

  • 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.
×