Vit792

Thank you for helping me at this, was afraid but to come with a fast solution.

I confirm, neither of our own ways can work. The way would be without using offset and doing it this way. motionPath: { path: '#A' align: '#A' alignOrigin: '#A' etc... But with the difference that it comes in one single SVG where paths and pieces are manually connected with illustrator on the top left corner of the rectangul containing the shape Doing so the effect where at the end of the motion the image comes together would come well. I tried it, it works I'll post the result at the end of it

No, these two options didn't work. What worked is to use the code of the path plus the offset brought by getOffset function returning window.top + element With the approach you showed there was a movement but it was following the path of the #A...etc... SVG, so it was not fitting into the right final position. Now it almost goes at the right spot, for sure getOffsetX works, not Y for some reasons but I've got to now as I got off the train. I'll update how it goes and show the final result with a video Thanks for helping me

Wow! That's wonderful! Yeah in regards to the offset I put those properties because with a previous simpler animation I made the SVG for it seemed the pieces weren't fitting perfectly in the final position, and I thought putting a precise offset could help. It's very helpful the piece.png you made! It simplifies the code a lot! I'll make the png from Illutrator!!! I really really thanky you, you've been helpful a lot I know the code was a mess in the code I put where all the things I tried so far, and unneeded styles. Just one question, will this align the piece to fit in the position it's supposed to be? I thought of using offset X and Y for this reason, so that the pieces built in the end the original image, in your example the code seems to be working fine but it's not clear if the piece goes where it's supposed to. Thank you I'll try this code, I'm on the train for some hours, I'll let you know how it goes

I just checked the result and the pieces appear at some point while there should be the impression they traveled along the #A #B #C paths to get into their position, they're curvy paths

No worries here it's almost time to go sleeping I'll see tomorrow, just to be clear, the best result would be that this pieces travel all the way to the position in the top left corner following the second SVG path. In the js there's also the code for the path in an alternative way to write it as it's explained on the gsap documentation, you'll find const pathA =" ...... Stuff "

https://codepen.io/vittorio792/pen/JjENaRM Here it is the code, it's been summarized because as you can see the first bit every image is giant..

CDN?

How do I add GSAP into code pen? Is there a way?

Sure! Thanks for replying so fast as well! ☺️? I'll do it in some time today.. As I said my project is made with Angular, I'll replicate it with JavaScript if there's no chance to run Angular, maybe in this I'll keep it easy just showing the basic code for it. P.S. the image I've got is super long, the base 64 image in the SVG are kilometric but that's what I've got, I received this file from someone else to make the animation

.Hello guys, I'm here because I'm struggling with an animation I'm making. Basically I've got two SVG, one is the paths one is the image made of many small pieces. Each piece should follow a single path to then return to the original position to be able to see the full picture all together. I'm using Angular and there's a function to get piece's offsets X and Y that return the number. It happens strangely that, whenever I put the offset the pieces aren't visible, they disappear, while with the inspection and console in the browser they are shown somewhere in the page. I'm adding the two files as attachments, one .ts and one .html The final effect as I said is with a timeline to start moving every single piece following a certain path into the original position, all starting at the same time, to recreate the initial image. The image is made of subdivisions of <g> <image base64> all called by Id="cls-number" And the rectangul that I'd like to move is defined at the beginning in a tag called <def> you'll see in the attachment. I couldn't find any solution I tried using in the path property both the SVG path and the ID of the element, the <g> <image base64 > is not even shown in the inspection with a certain position.. so I could catch them only from <Def> --><tag id ="clip-path-number" > --> <rect> Now they disappear, making some trials with a div instead and writing.. In the tl.to {( "div" ... path: "#A", align: "#A" you can see it moving without getting to the initial position Is it because the paths and the SVG image are different and I should link the paths and the pieces with Illustrator? Is there another faster solution? Thank you so much, I appreciate your time. Files as attachments Update The html file is too large I'll put here snippets <div> <div id="P1" style=" z-index: 3; background-color: red; position: absolute; top: 400px; left: 200px; display: block; height: 50px; width: 50px; " > CIAO </div> <svg style="width: 80%; height: auto; opacity: 0.85; overflow: visible" id="glass" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 827.76 470.16" > <defs> <style> #cls-1 { fill: none; } #cls-2 { clip-path: url(#clip-path); } #cls-3 { clip-path: url(#clip-path-2); } #cls-4 { clip-path: url(#clip-path-3); } #cls-5 { clip-path: url(#clip-path-4); } Etc.. till #cls-34 </style> <clipPath id="clip-path" transform="translate(-180.48 -157.92)"> <rect class="cls-1" width="1224" height="792" /> </clipPath> <clipPath id="clip-path-2" transform="translate(-180.48 -157.92)"> <rect class="cls-1" x="201.84" y="178.08" width="98.4" height="100.56" /> </clipPath> <clipPath id="clip-path-3" transform="translate(-180.48 -157.92)"> <rect class="cls-1" x="185.28" y="216" width="102.96" height="139.92" /> </clipPath> <clipPath id="clip-path-4" transform="translate(-180.48 -157.92)"> <rect class="cls-1" x="261.36" y="172.56" width="107.52" height="140.16" /> </clipPath> <clipPath id="clip-path-5" transform="translate(-180.48 -157.92)"> <rect class="cls-1" x="359.28" y="178.56" width="151.68" height="137.28" /> Etc.. With then.. </defs> <title>broken_pieces</title> <g class="cls-2"> <g id="cls-3"> <image width="410" height="419" transform="translate(21.36 20.16) scale(0.24)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZoAAAGjCAYAAAAVc9MGAAAACXBIWXMAAC4jAAAuIwF4pT92AAAgAElEQVR4Xuy9W6ws2Xnf919V1d1773POTEgOZ0aKRFKiQEq0EIWKQkg8IWcOowTkg2HoxQjgAHkIgrxQLwngB79ISYA8ODAMR Etc.. /> repeated many times </SVG> And the SVG of the paths is this <svg style="position: absolute; top: -350; left: 50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1177.544 1177.689" > <defs> <style> .clss-1, .clss-2 { fill: #fff; visibility: hidden; } .clss-1, .clss-3 { stroke: #000; stroke-miterlimit: 10; } .clss-3 { fill: none; visibility: hidden; } </style> </defs> <title>motionPath</title> <g data-name="Layer 1"> <path id="A" class="clss-1" d="M529.5,591.5c22.669-75.258,103.207-307.484,330-432,277.264-152.226,678.576-91.563,743,75,38.4,99.286-44.809,231.264-133,296-167.08,122.644-443.526,71.105-493-57-33.461-86.642,31.011-223.557,139-270,74.81-32.174,196.507-32.112,239,42,29.286,51.078,7.086,113.146,0,131" transform="translate(-512.872 232.263)" /> </g> <g id="B" data-name="Layer 2"> <path class="clss-1" d="M615.826,731.494c5.364-78.415,32.238-322.736,225.659-494.573C1077.95,26.844,1482.7-3.263,1582.557,144.8c59.521,88.259,7.746,235.437-63.839,318.166-135.62,156.731-416.6,167.965-493.33,54.07-51.892-77.03-19.484-224.855,75.471-294.151,65.781-48.006,184.444-75.01,242.355-12.2,39.913,43.285,32.073,108.736,29.135,127.719" transform="translate(-512.872 232.263)" /> </g> Repeated till... Id="ZD" Can someone help me figuring this out? Thanks a lot welcome-view.component.ts