awazigh Posted May 31, 2021 Share Posted May 31, 2021 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 More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 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 More sharing options...
awazigh Posted May 31, 2021 Author Share Posted May 31, 2021 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 More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 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 More sharing options...
awazigh Posted May 31, 2021 Author Share Posted May 31, 2021 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 More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 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 4 Link to comment Share on other sites More sharing options...
awazigh Posted May 31, 2021 Author Share Posted May 31, 2021 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 More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 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 More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 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 More sharing options...
awazigh Posted June 1, 2021 Author Share Posted June 1, 2021 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 More sharing options...
awazigh Posted June 1, 2021 Author Share Posted June 1, 2021 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? 1 Link to comment Share on other sites More sharing options...
awazigh Posted June 1, 2021 Author Share Posted June 1, 2021 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 More sharing options...
awazigh Posted June 1, 2021 Author Share Posted June 1, 2021 all good @Cassie I solved the positioning issue, thanks ☺️ 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2021 Share Posted June 1, 2021 Good job! 1 Link to comment Share on other sites More sharing options...
awazigh Posted June 1, 2021 Author Share Posted June 1, 2021 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 More sharing options...
Solution Cassie Posted June 1, 2021 Solution Share Posted June 1, 2021 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 2 Link to comment Share on other sites More sharing options...
awazigh Posted June 1, 2021 Author Share Posted June 1, 2021 Great!! Many thanks @Cassie ☺️ aka "Rosie the Riveter" 😁 you made my day 🥳 2 Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2021 Share Posted June 1, 2021 Ahaha, no worries pal! 🥳 Glad we got there in the end, this was a fun one. 2 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