Animation of scales on SVG

[petlyra]

Hi all. I'm just learning animation, don't judge too harshly
Need help, maybe there is a ready-made solution or maybe tell me where to go.
The task is:
1) when transferring weights and apples, place them on the scales, and also transfer them back and from one bowl to another
2) weigh correctly, although now the logic is partially configured

See the Pen pomwQmP by petlyra5 (@petlyra5) on CodePen

[mvaneijgen]

Hi @petlyra welcome to the forum!

18 minutes ago, petlyra said:

1) when transferring weights and apples, place them on the scales, and also transfer them back and from one bowl to another

You could have the different symbols already on the scale and then just show or hide them (of course with an animation) when you need them)

. You could reparent the symbols you're are already using, but is seems simpler, to have totally different sets (you could then create a different graphic, for having 1 apple or 3 apples on the scale. 

 

If you want to use the same graphic, you could look in to the Flip plugin, this would then figure all the repositioning out for you. Especially Flip.fit() check it out https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

19 minutes ago, petlyra said:

2) weigh correctly, although now the logic is partially configured

Yeah there is no collision detection in GSAP, so you'll have to write your own logic for that, but you already have to seem that down. 

 

Hope it helps and happy tweening! 

[petlyra]

10 hours ago, mvaneijgen said:

Привет@petlyra добро пожаловать на форум!

Вы можете разместить на шкале разные символы, а затем просто показывать или скрывать их (конечно, с анимацией), когда они вам понадобятся)

. Вы можете изменить родительские символы уже используемых символов, но, кажется, проще иметь совершенно разные наборы (затем вы можете создать другое изображение для одного яблока или трех яблок на шкале. 

 

Если вы хотите использовать ту же графику, вы можете воспользоваться плагином Flip, который затем выяснит все изменения позиционирования за вас. Особенно Flip.fit() проверьте  https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Да, в GSAP нет обнаружения столкновений, так что вам придется написать для этого свою собственную логику, но вам уже придется это сделать. 

 

Надеюсь, это поможет и счастливого подросткового периода! 

Thank you for your advice. I will try to implement it!

[petlyra]

10 hours ago, mvaneijgen said:

Hi @petlyra welcome to the forum!

You could have the different symbols already on the scale and then just show or hide them (of course with an animation) when you need them)

. You could reparent the symbols you're are already using, but is seems simpler, to have totally different sets (you could then create a different graphic, for having 1 apple or 3 apples on the scale. 

 

If you want to use the same graphic, you could look in to the Flip plugin, this would then figure all the repositioning out for you. Especially Flip.fit() check it out https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Yeah there is no collision detection in GSAP, so you'll have to write your own logic for that, but you already have to seem that down. 

 

Hope it helps and happy tweening! 

Thank you for your advice. I will try to implement it!

[petlyra]

I modified the code(it has already been corrected above) and I have some questions   :

 

1.  Why is it not transferred from the left pan of the scale to the left, but everything works from the right to the left pan of the scale?
2.  Also, if you transfer an object from the scales to its original state, then it is not transferred

As I understand it, this is due to the order of the tags in the SVG?
I need your help on how to fix this. Thank you

[Rodrigo]

Hi,

 

This is not related to the order of the tags in your HTML, but mostly to some issues on the logic in your code. There are two issues I can spot in your code.

 

The first problem is that the Draggable instance of each element is not updated after the element is dropped in the scale and the transform property added by Draggable is not removed, this can be solved by this in your hide method:

const hide = (element, number = 0) => {
  gsap.to(element, {
    duration: 0,
    opacity: 0,
    scale: 0,
    x: 0,
    y: 0,
    onComplete: () => {
      // Get the draggable instance for the element
      const d = Draggable.get(element);
      // Remove the transforms applied to the element
      gsap.set(element, { clearProps: "transform" });
      // Update the Draggable instance
      d.update();
    },
  });
  element.classList.remove("w-3");
  element.classList.remove("w-1");
};

The second problem is that the logic  of your show method is working only when you drag something on the scale and not when you drag it from the scale, since both elements (the one in the scale and the one in the rectangle area) have opacity 0 after you remove them from the scale. You need to find a way to track the element(s) in the scale in order to correctly show the one in the rectangle area once is removed from the scale. Unfortunately I don't have the time to dig into your code and find a way to make this work as you expect, especially since this is mostly a logic issue rather than a GSAP related one.

 

Hopefully this helps.

Happy Tweening!

[petlyra]

16 hours ago, Rodrigo said:

Hi,

 

This is not related to the order of the tags in your HTML, but mostly to some issues on the logic in your code. There are two issues I can spot in your code.

 

The first problem is that the Draggable instance of each element is not updated after the element is dropped in the scale and the transform property added by Draggable is not removed, this can be solved by this in your hide method:

const hide = (element, number = 0) => {
  gsap.to(element, {
    duration: 0,
    opacity: 0,
    scale: 0,
    x: 0,
    y: 0,
    onComplete: () => {
      // Get the draggable instance for the element
      const d = Draggable.get(element);
      // Remove the transforms applied to the element
      gsap.set(element, { clearProps: "transform" });
      // Update the Draggable instance
      d.update();
    },
  });
  element.classList.remove("w-3");
  element.classList.remove("w-1");
};

The second problem is that the logic  of your show method is working only when you drag something on the scale and not when you drag it from the scale, since both elements (the one in the scale and the one in the rectangle area) have opacity 0 after you remove them from the scale. You need to find a way to track the element(s) in the scale in order to correctly show the one in the rectangle area once is removed from the scale. Unfortunately I don't have the time to dig into your code and find a way to make this work as you expect, especially since this is mostly a logic issue rather than a GSAP related one.

 

Hopefully this helps.

Happy Tweening!

However, this option does not solve the problem of transferring an object from one bowl to another. I see that the <g> tag is also stretched where the item itself is included https://skrinshoter.ru/sQSueG1oT6X?a

[Rodrigo]

Hi,

 

Again this is mostly about the JS logic in your code and not really a GSAP related issue. This is mostly about keeping track of the elements on the plates more than anything else which, again, is not a GSAP related issue but a logic issue.

 

You have to find the way to keep track of that, maybe a specific ID for each element and an array for each scale plate and the rectangle in order to keep track where the element is in order to show/hide it accordingly.

 

Happy Tweening!