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