Jump to content
GreenSock

Anastasiya33

Can't change progress() after it is == 1

Go to solution Solved by Anastasiya33,

Recommended Posts

Hello everyone,

 

I have a problem with (I believe so) progress().

I have timeline and I am making controls for interaction with it. Among controls I have input type range. I would to make it possible to control timeline with this input (range).

 

So I have this code:

 

    updateRange = (timeline) => {

        timeline.eventCallback("onUpdate", function () {

            let range = document.getElementById('range');

            range.value = timeline.progress();



            range.addEventListener("input", function () { handleUserInteraction() });

            function handleUserInteraction() {

                    timeline.pause();

                    timeline.progress(range.value);

            }

        });

    }

 

While timeline is running from 0 to 1 (progress), this code works perfectly. But after progress of the timeline is 1, I can’t control the timeline.

 

If you have thoughts, please let me know.

 

 

 

UPDATE

I found reason. You could find code below.

It works perfectly with regular timeline. But what if I would like to use globalTimeline? When I change to globalTimeline it's not working - can't change progress() after it is == 1.

 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Hi @Anastasiya33 welcome to the forum! 

 

It would be nice if you could provide a minimal demo, so we can jump in your code directly instead of anyone wanting to help you first having to create their own demo.

 

But that said, have you seen the GSDevTools https://greensock.com/docs/v3/Plugins/GSDevTools

 

I never used it in production, but if I read your question correctly it does exactly what you want (and more)

 

See the Pen MEYxBZ by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

I found reason. 

 

It works perfectly with regular timeline. But what if I would like to use globalTimeline? When I change to globalTimeline it's not working - can't change progress() after it is == 1.

Link to comment
Share on other sites

Yes, that's very intentional - the globalTimeline has autoRemoveChildren set to true so that completed tweens get popped off and become eligible for garbage collection. Otherwise, every tween/timeline you ever create would just stick around forever, building up in memory. So once you complete, those child tweens are getting removed, thus the duration of the globalTimeline drops down to zero. 

 

Does that clear things up? 

 

I would definitely recommend NOT messing with the globalTimeline like that. Always use a separate one. 

Link to comment
Share on other sites

I see, thank you!

 

Let me just explain my intentions. I am working on a tool - Controller, that will help creative developers to test their work with animation. I am developing a class, to which people can pass their timeline, but what if developer uses multiple timelines in one creative? In this case I added globalTimeline. So just to sum up, if a developer has 1 timeline, this timeline is passed to a class, but if there are multiple ones, there is no need to pass any, because the default timeline is globalTimeline.

 

Could you please suggest how to work with such kind of situations?

Link to comment
Share on other sites

I'm not sure I follow. Why is the default timeline globalTimeline? 

Link to comment
Share on other sites

As you can see in codepen demo, if user of the class do not pass a timeline, I made a default timeline as gsap.globalTimeline. The main idea of this is to 'unite' of the timelines (if there are a few ones) and control all of them at once.

Link to comment
Share on other sites

Ok, gotcha.

You can nest timelines like so, then you can control the master timeline.
 

function intro() {
	var tl = gsap.timeline();
	//...add animations here...
	return tl;
}

function middle() {
	var tl = gsap.timeline();
	//...add animations here...
	return tl;
}

function conclusion() {
	var tl = gsap.timeline();
	//...add animations here...
	return tl;
}

// stitch them together in a master timeline...
var master = gsap.timeline();
master.add(intro())
      .add(middle(), "+=2")     //with a gap of 2 seconds
      .add(conclusion(), "-=1") //overlap by 1 second

 

  • Like 1
Link to comment
Share on other sites

The idea is to create a class, which can be used by many creative developers in order to test their work. So it`s not me who will be creating timelines with animations.

 

So if a person has more than 1 timeline, (the idea was) this person do not need to pass all of the timelines to my class, but there will be globalTimeline, who will 'collect' all of them at once.

Link to comment
Share on other sites

That's what a master timeline is for. For 'collecting' child timelines.

I don't know what your structure allows and doesn't but this is definitely the route to take GSAP-wise.

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