clear class from timeline

[kingproo 0 Likes (Newbie)]

hello, I want to animate any element, and when I click on each element it changes position and stop animation.

 

See the Pen KVaNoJ by kingproo (@kingproo) on CodePen

 

 

[Dipscom 3,365 Likes (Superhero)]

Hi kingproo,

 

Welcome to the forums! I see you made a codePen with a minimal case scenario. I am just having a little difficulty understanding what is is that you are asking. I tested your animation and all buttons seem to work. I can also imagine this is not exactly what you want as the animation is a bit strange. If you could elaborate a bit more on what is it that you are trying to achieve, I am more than happy to try to help.

[kingproo 0 Likes (Newbie)]

Thanx @Dipscom,  I have 4 elements in animation(background red). What I Want to do is: when i click to one of those element his position change and the other  continue the infinite animation.

 

Thanx.

[Dipscom 3,365 Likes (Superhero)]

Is this what you are after?

 

See the Pen RrKVRo?editors=001 by dipscom (@dipscom) on CodePen

 

Or what you want is to remove the clicked element from the looping timeline?

[kingproo 0 Likes (Newbie)]

I want to fix the selected item, and the other remaining loop.

 

thanx.

[Dipscom 3,365 Likes (Superhero)]

I see. Ok, I have amended the pen I forked from you. Have a look to see if that's what you were expecting.

 

My opinion is that you might be overcomplicating things here a bit. Unless you are sequencing things, you don't really need TimelineMax. You can just assign a tween to each of the objects and kill them as needed (which is partially what I did here).

 

If I were to approach this, I would write a function to create the individual tweens and another one that kills it. That way, you could start and stop the movement as needed.

[kingproo 0 Likes (Newbie)]

I want to create a function to test the click after or before position <hr>. If after --> click and animation position disabled 

 

thanx

[Dipscom 3,365 Likes (Superhero)]

Ok, well, again, I am not sure what is it that you are after. There are tons of ways of achieving a check against a position - the trouble is, what situation are we considering here?

 

Where is this <hr> tag? Is it fixed? Does it move around? The easiest way is to simply have an if() statement to check the red box total progress against the tween then, move or not move depending on it.

 

But, the setup you have in mind might be different. That's why the codePen is super helpful. Because it allows us to troubleshoot your code. How about you update the codePen you made with the things you want to achieve? 

[kingproo 0 Likes (Newbie)]

Attached is a game image every element make an animation. when a eelement exceeds the red line he raises the animation again, if not after the click moves in the pannel.

sorry I'm not good English why I use goole translation

 

[Dipscom 3,365 Likes (Superhero)]

Riiight. That is a rather more complicated scenario than: "clear class from timeline".

 

I say there is a lot more that you will need to grasp in order to pull it all. You probably will be better off using a 2D renderer as well if you are looking into making a game. I will follow OSUblake and recommend PIXI.js - for no other reason than, he says it's good. So, I believe him.

 

Your requirement has given me something to focus on, which I am very grateful for. See the bellow codePen. I made it based on your previous questions and this image. Hopefully this is something you can work with. Let me know if you have any problems with it. I will make another one another time with a bit more interactivity to it. I shall post it here when done.

 

See the Pen GorOyw?editors=001 by dipscom (@dipscom) on CodePen

 

Speaking of OBUblake, shotout for him as

See the Pen vNwRdO by osublake (@osublake) on CodePen

was the base for mine and for being an all-round good sport and great source of knowledge.

[Carl 11,096 Likes (Superhero)]

Excellent work, Dipscom, plus extra points for using Pixi! I'll throw an inspiration point to Blake as well;)

 

Kingproo,

 

I have to agree 100% with Dipscom. This is not a good case for using a TimelineLite/Max; much better to use individual tweens for each element.  Questions like this can be fun challenges for us all and more often than not our community members will enjoy trying to find the best way to make these things work. As noted above, there is quite a bit of code and logic involved in this type of game that goes way beyond what GSAP does or what we can reasonably help with.

[kingproo 0 Likes (Newbie)]

thank you, I want to use an html code with different elements to test if the player clicked on the correct element or no.

[Carl 11,096 Likes (Superhero)]

Sorry, I'm not quite sure what you mean. We really have to keep our support focused on what our animations tools can do. For general programming help stackoverflow is great: http://stackoverflow.com/

[OSUblake 18,472 Likes (Superhero)]

Good job dipscom! Was that your first attempt at pixi?

[Dipscom 3,365 Likes (Superhero)]

Indeed it was. But I have done some work with Three.JS in the past, which is in the same logic and very similar API as PIXI.