Lacika1981

progress() not working

Recommended Posts

Hi,

 

I can not create a working codepen project.

First of all the progress() method is working as it supposed to but not in my case. (Tried to create an example and it works fine but not in my main project)

 

for (var i = 0; i < $chartContainer.length; i++) {
                tweensArray.push(TweenMax.from(pathObject['pathElem'][i], (pathObject['pathTiming'][i]) * 3, { drawSVG: 0, onComplete: drawDots, onCompleteParams: [i] }, 0));
            }

function animateNumbers(noc, currentContainer, timing) { /* noc => number of charts */
        Object.keys(percentage).forEach(function(prop) {
            delete percentage[prop];
        });
        for (var i = 0; i < noc; i++) {
            percentage['score' + i] = $('.swiper-slide-active .score')[i].getAttribute('data-score');
            createAnimation(i, currentContainer, timing);
        }
    }

function finishAnimationOnClick() {
        if(tlanimationMain.isActive()) {
            tweenNumbersArray.forEach(function(tween, i) {
                tween.progress(1);
            });
            tweensArray.forEach(function(tween) {
                tween.progress(1);
            });
            tlanimationMain.clear();
        }
    }

function createAnimation(i, currentContainer, timing) {
        tweenNumbersArray.push(TweenMax.from(percentage, timing[i] * 3 + 1.25, {
            ['score' + i]: '-=' + percentage['score' + i],
            roundProps: ['score' + i],
            onUpdate: function () {
                $($('.swiper-slide-active .score')[i]).html(percentage['score' + i].toFixed(0))
            }
        }));
        currentContainer.attr('played', true);
    }

 

I try to explain what I would like to achieve.(Not good with naming)

 

The animateNumbers function first create an object with all numbers that I try to animate.

The createAnimation function animate them.

The finishAnimationOnClick should set progress to the end and clear the timeline.

 

When the animation runs and click on a button then it should finish all the animation.

As you can see there are two arrays. Each holds different tweens.

The following part of the script works fine and finishes the animation straight.

tweensArray.forEach(function(tween) {
                tween.progress(1);
            });

 

this one not

tweenNumbersArray.forEach(function(tween, i) {
                tween.progress(1);
            });

 

I pushed the tweens into arrays and add them to the timeline

tlanimationMain.add([tweensArray, tweenNumbersArray], 0);

 

The animation runs nicely as I would expect it but to finish them when a button is clicked not working with the `tweenNumbersArray`.

 

My code maybe not nice so please not judge me on it.

 

Thanks

Share this post


Link to post
Share on other sites

Hello @Lacika1981 and Welcome to the GreenSock Forum!

 

Sorry your having issues. Can you please create a reduced codepen demo example so we can see your code in action to test properly? This way we can test in a live editable site to better help you and see exactly what is happening.

 

 

Thank You :)

  • Like 4

Share this post


Link to post
Share on other sites

I created the project on codepen and it works there.

The error must be somewhere else.

Share this post


Link to post
Share on other sites

You may help me.

 

I use slider (http://idangero.us/swiper/)

 

This causes the problem. If I am not navigating to other slide than the function runs well and everything working as expected.

As soon I click on a different slide than the numbers are not jump to the end but stop where they are. Same as if I use the pause() method.

 

I do not know how to solve this. Any idea is welcomed.

 

Thanks

Share this post


Link to post
Share on other sites

We really try to keep these forums focused on GSAP-specific questions. Did you have one of those? It sounds like maybe this is a problem related to the Swiper library you're using? If you still need some help, please provide a reduced test case in codepen so that we can see what's going on (again, the simpler the better). 

 

Happy tweening!

Share this post


Link to post
Share on other sites

Thank to coming back.

 

Yes my issue is not related to GSAP. It is clear now.

However if you can find a better title that can help someone else facing the same problem.

So here it is what I have done to get it work.

 

mySwiper.on('touchStart', function () {
        tr = mySwiper.getTranslate();
        state.isMouseDown = false;
        finishAnimationOnClick('touch');
    });

    mySwiper.on('slideChange', function () {
        finishAnimationOnClick('click');
    });

 

There are two different eventListeners what I needed to use because the slider works on touch and click (the parameters there only for testing purposes to see where the function was called from).

 

Of course it is just a little thing (and annoying). I had to do other changes but that can be very project specific so I do not share those changes.(No changes to that code I shared the very first time).

 

This way the animation is not breaking but finishes as expected.

As I said it is not GSAP related issue but spent a huge amount of time to trace the error and it may save someone a bit of time.

  • Like 1

Share this post


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.