Jump to content
Search Community

clear class from timeline

kingproo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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 :)

 

981192jjjj.png

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...