BerenTinuviel

Thank you so much for your help Rodrigo, you got me alot closer to the goal! I managed to make some progress, however there are still some things bothering me. Here's a simplified pen with my current approach: https://codepen.io/Eric-Sommerhalder/pen/poQeYYO Here's a list of my questions/problems with this: - why can't i give tween22 (the one that strips the line of any former transformation) transformOrigin: "center center"? It behaves weirdly when I do? - do you have an idea how I can make this animation any more "resistant" when the window get's resized? currently it doesn't update the final position of the smaller Logo and I'm not sure how to implement that. Here's a pen with the whole animation I'm going for in case that clarifies anything, but of course I understand that it is way too long to be looked at in depth: https://codepen.io/Eric-Sommerhalder/pen/VwVpRoj Thanks a lot again!

Hi guys :), First post so please let me know if I did something wrong while formulating the question or writing the codepen. I'm trying to have an animation with my logo (which is an svg). First the lines should move apart and in the end they should reform the logo in a smaller scale on the top left. I'm really struggling with the latter part, reforming the logo on the top left. The concrete problem i'm facing is that I cannot for the life of me figure out how to position a group of the svg at an absolute position. I have tried many ways, including using the MotionPathPlugin methods convertCoordinates() and getRelativePosition(), as well as some techniques with either getBoundingClientRect() or getBBox(). I haven't found a way that places the line exactly at the spot where I want it to be. How I could make a second line attach to the first line is an issue I haven't even tackled yet. I have attached a pen where I tried to map out what I'm trying to do in a simplified way. Let me know if any clarification is needed. Thanks a lot! Eric