Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About Vit792

  • Rank
  1. Thank you for helping me at this, was afraid but to come with a fast solution.
  2. 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,
  3. 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 he
  4. 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.
  5. 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
  6. 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 "
  7. 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..
  8. How do I add GSAP into code pen? Is there a way?
  9. 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
  10. .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