Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rahuljain

Pause all TimelineMax objects in one click

Recommended Posts

 //this right here is a code inside a function which gets called multiple times and responsible to animate multiple objects from its initial position to targeted position(object and position changes after every iteration).

//Also a progress bar is implemented which is responsible to show the progress of the animation.

 

this.tween = new TimelineMax({ onUpdate: showProgress.bind(this)});

            this.tween.to(from, { duration: 10, 

                x: to.x, 

                y: to.y, 

                z: to.z 

            ,});

           

            this.tween.from(".red", this.tween.duration(), { scaleX: 0, transformOrigin: "0px 0px", ease: Linear.easeNone }, 0);   

           

            function showProgress() {

              this.progress=  new TweenLite.set(progress, { scaleX: this.tween.progress(), transformOrigin: "0px 0px" });

                duration.innerHTML = "Progress:" + parseInt(this.tween.time() * 10) + "%";

                

            }  

        }

 

//i want to create a function which gets all the animating objects(15) in the scene and apply pause to all of them

//right now what happens is pause is being applied to only one object not all the objects.

//please help 

 

pauseAnimation: function() { 

     this.tween.pause()

      }

Link to post
Share on other sites

Hi there. Could you please share a Codepen with a simple example/demo of what you have done so far?

  • Like 1
Link to post
Share on other sites

Actually @jimmy-a theres a lot i have to code which will consume a lot of time i am just trying to access all the objects that have been tweened earlier so that i can apply pause to all of them. but clearly it will be applicable for only one object cause this.tween variable is global and the last object that remains in it will get paused . but i dont know how to get all of them . i have tries almost all the inbuild functions but couldn't get the output

Link to post
Share on other sites
5 minutes ago, rahuljain said:

Actually @jimmy-a theres a lot i have to code which will consume a lot of time i am just trying to access all the objects that have been tweened earlier so that i can apply pause to all of them. but clearly it will be applicable for only one object cause this.tween variable is global and the last object that remains in it will get paused . but i dont know how to get all of them . i have tries almost all the inbuild functions but couldn't get the output

 

I understand, but try to create a Minimal, Reproducible Example. It would be easier for us to help you. 

  • Like 1
Link to post
Share on other sites

is there any other way cause creating even small code is a headache @jimmy-a

 

Link to post
Share on other sites

Hey rahuljain and welcome to the GreenSock forums.

 

There are a lot of ways to pause all of the animations and the "best" depends on your setup and needs. If all of the animations are on the same timeline, just pause that timeline. If you have a list of all of the tweens you can iterate through that list and pause each one of them. If you don't have a list of them, there' a .getTweensOf() method which returns an array of tweens that are animating a target that you could loop through and pause the animations of. Or you could pause all animations by pausing GSAP's .globalTimeline. Without seeing your setup it's hard for us to recommend one of those over another :) 

Link to post
Share on other sites

Omg @ZachSaucier you came like a god here. gsap.globalTimeline. is what i was looking for. this function responds the output like i wanted.

actually i had an assembly in three.js which i want to explode so that i can see all the parts of which it is made of. so i was traversing the assembly to get it child nodes and  animating them from there initial position to target position. each time the traversing happens and Timeline function gets called which is responsible to explode the assembly. i was able to do so but i also wanted to implement a pause button which pauses all the animation for all the parts in one go. and a resume feature which resumes the animation on button click. i hope its clear to you now a little. and gsap.globalTimeline is what i was looking for.  the output is good. i hope my question helps someone in future.     thank you so much and thanks @jimmy-a for helping me out as well. Gsap rocks

  • Like 1
Link to post
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.

×