Jump to content


how to find an inner sequence

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

In this animation there is an inner sequense where the tank is going on.

I wan to pause this moment so I can add some flames (see the image below).

Insteed of every time waiting until this moment and trying to put correctly the flame.

How can I  go inside the event handlers and find and manipulate tha scene?


See the Pen OwvZNm by makis2404 (@makis2404) on CodePen

Link to comment
Share on other sites

You can use GSDevTools to control your animations, it won't help you with interactive animations but you can build your animation separately and use GSDevTools to get your timing right.




You can also use timeline to build such animations and make the flame effect at right moment using position parameter.





Apart from that not sure what to suggest you as your demo doesn't load images because they are hosted on http server, save them somewhere with https so they will show up on your demo.

  • Like 4
Link to comment
Share on other sites

I was able to see the images, but I'm still having a hard time understanding the question. Are you trying to pause the tank timeline and animate an explosion or are you trying to find the tank's x position to start the explosion near it?


We're happy to help with any GSAP related problems, but you can help us better assist you by creating simplified demos. The opening sequence of the demo you listed above is 26 seconds and uses your actual photo assets. We don't need all your final images or the full animation. Just some simple divs and enough code to demonstrate the problem/question is preferable.




  • Like 3
Link to comment
Share on other sites

Ok. the first one is what I need. to pause the tank and animate an explosion. I have made it in a simplified timeline whith no event handlers and a <g> with circles and  rects as the tank. And you can fire on click the tank. there is a score on top. There is a mistake at css of <p>   (fill instead of font-color).


See the Pen yqKxKG by makis2404 (@makis2404) on CodePen



Link to comment
Share on other sites

okay, if I understand your desired outcome correctly, I'd recommend creating the explosion timeline ahead of time rather than every time you click. You can then play() it on each click. In that click handler you can pause the tank timeline and then add a delayedCall to resume() it. Maybe something like this:


See the Pen ejMPvp by PointC (@PointC) on CodePen

Does that help?


Happy tweening.



  • Like 5
Link to comment
Share on other sites

Thank you very much! 

It is a little complicated but I think It is a good lesson to work with It! 

Link to comment
Share on other sites

I can read It now and It is simple and I can understand It. I think It is a perfect pen for helping me with my pen. Thank you very much. 

  • 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.