Moving multiple <g> to the same place

[Aivars]

Hey, recently started to experiment with GSAP animations and I'm having a hard time figuring out how to move multiple SVG groups from different positions to the same y position. Taking in consideration that groups mostly consist of path elements which doesn't support x and y attributes.

By using simply gsap.to(objects, {y: number}) , I just get the elements to move y pixels down and not to the same y position.

In my pen I want to achieve that when the logo in the middle is clicked, assembly line shows up and all the parts drop on it.

See the Pen WNvgWmZ by aivarsyo (@aivarsyo) on CodePen

[ZachSaucier]

Hey Aivars and welcome to the GreenSock forums!

 

12 minutes ago, Aivars said:

I'm having a hard time figuring out how to move multiple SVG groups from different positions to the same y position.

You can easily do this by moving all of the elements to have the same origin (like 0,0). Using a vector editor like Illustrator to do this would be easiest. You could then use GSAP to offset them as necessary (using gsap.set() if you want it to be immediate). If you need each element to have specific offsets (say to recreate the exact layout that you have at the start in the demo above), you could store the information in a JS object or via data attributes in the HTML. That'd definitely be the easiest thing to do.

 

If you can't do the above for some reason, there is another way to do it using the new functionality in MotionPathPlugin, but I don't think it's worth explaining if the above works for you.

 

Some side notes:

• You can use GSAP's built in random functions instead of having to roll your own. You can use the string form if you want to use it directly in your tween's property values or use it via GSAP's utility function via gsap.utils.random() if you want.
• We recommend using the condensed string form for eases like "power1.inOut".
• We recommend including the duration inside of the vars parameter so you can use defaults and string values like duration: "random(5, 10)".

[OSUblake]

1 hour ago, Aivars said:

Taking in consideration that groups mostly consist of path elements which doesn't support x and y attributes.

 

<g> elements support transforms.

 

1 hour ago, Aivars said:

By using simply gsap.to(objects, {y: number}) , I just get the elements to move y pixels down and not to the same y position.

 

You need to calculate the difference between the position of a <g> element and the point you want. Something like this.

 

var parts = document.querySelectorAll('#CarParts > g:not(#FordLogo)');
  
gsap.killTweensOf(parts);
    
gsap.to(parts, {
  y: (index, element) => {
    var box = element.getBBox();      
    return 300 - box.y - box.height;
  }
});

 

Also, you're creating a ton of <use> elements because you're calling the fordLogoClicked function for every part.