Vit792 Posted April 3, 2021 Share Posted April 3, 2021 .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 Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2021 Share Posted April 3, 2021 Hi there! I would love to help with this. Would you be able to make a stripped back demo in codepen so we can help you debug? 2 Link to comment Share on other sites More sharing options...
Vit792 Posted April 3, 2021 Author Share Posted April 3, 2021 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 Link to comment Share on other sites More sharing options...
Vit792 Posted April 3, 2021 Author Share Posted April 3, 2021 How do I add GSAP into code pen? Is there a way? Link to comment Share on other sites More sharing options...
Vit792 Posted April 3, 2021 Author Share Posted April 3, 2021 CDN? Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2021 Share Posted April 3, 2021 If you go to the settings panel you can add libraries Here's a starter pen with all the links - See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen Also, I would start off by getting rid of the base 64 image and adding a image tag in the SVG, it'll be a lot less confusing to work with - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image 2 Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2021 Share Posted April 3, 2021 And yeah, I'd recommend starting off getting the basic demo working then angular-ize it. 1 Link to comment Share on other sites More sharing options...
Vit792 Posted April 3, 2021 Author Share Posted April 3, 2021 See the Pen JjENaRM by vittorio792 (@vittorio792) on CodePen Here it is the code, it's been summarized because as you can see the first bit every image is giant.. Link to comment Share on other sites More sharing options...
Cassie Posted April 3, 2021 Share Posted April 3, 2021 Awesome! It's dinner time for me but I'll check this out tomorrow am Thanks for putting this together. 1 Link to comment Share on other sites More sharing options...
Vit792 Posted April 3, 2021 Author Share Posted April 3, 2021 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 " Link to comment Share on other sites More sharing options...
Vit792 Posted April 3, 2021 Author Share Posted April 3, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted April 4, 2021 Share Posted April 4, 2021 Ok pal! I've simplified this down a lot for demo purposes. 1) You were trying to animate rectangles within clip paths. I assume you wanted to target and animate the actual elements themselves? This is why stuff was disappearing (the clipping area was moving). I've removed the c lip paths as they didn't seem to be having any other effect. Apologies if you were intending to use the clip paths in some way and I've misread this. 2) Tidy tidy tidy - There is so much going on - Inline styles, styles in CSS, styles as presentation attributes, inline transforms, base 64 stuff, unused clip paths, No wonder you're confused. For a start I'd get rid of that base 64 stuff and just pop the images right in like this. - <image xlink:href="image.png" id="cls-5" /> SVGOMG is also lovely for tidying up SVG code 3) You can use alignOrigin: [0.5, 0.5]to align items on the motion path - you shouldn't need to use offsets in the way you are currently. Again apologies if I've misread. From this example it seems to be working fine - so I don't think this is a GSAP issue - more a need to do some tidying up and target the right elements. See the Pen 4c1c10188b3e3023d4294086144a7eef by cassie-codes (@cassie-codes) on CodePen Hope this helps! 5 Link to comment Share on other sites More sharing options...
Vit792 Posted April 4, 2021 Author Share Posted April 4, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 4, 2021 Share Posted April 4, 2021 You can also just right click in the browser and save the image if you don't want to export again, that's what I did! In terms of aligning the piece to fit where it's supposed to there are a few options for alignment. You can say (as you are) align: path which will align the element with the path, or you can say align:self which will align the path with the element - (think of it as moving the path to the element rather than the element to the path) One of these should do the job. You are working in two coordinate spaces though (two SVG's), which Greensock should be able to handle. But if you come across any issues it may help to have the paths and the elements within one SVG. I tend to do this when possible to make life easier and the code easier to port and read. 1 Link to comment Share on other sites More sharing options...
Vit792 Posted April 4, 2021 Author Share Posted April 4, 2021 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 1 Link to comment Share on other sites More sharing options...
Vit792 Posted April 4, 2021 Author Share Posted April 4, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted April 4, 2021 Share Posted April 4, 2021 Yep, it's always the easiest route to set everything up nicely in one SVG to start off with! Glad you figured it out. Good job! 3 1 Link to comment Share on other sites More sharing options...
Vit792 Posted April 5, 2021 Author Share Posted April 5, 2021 Thank you for helping me at this, was afraid but to come with a fast solution. 1 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