Jump to content
Search Community

Lacika1981

Members
  • Posts

    35
  • Joined

  • Last visited

Everything posted by Lacika1981

  1. 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
  2. I created the project on codepen and it works there. The error must be somewhere else.
  3. 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
  4. Thank you @Carl I am sorry I did not add code to the question. Changed the code and it works fine now. I straight realised what I have done wrong. I had an issue previously so thought to add the sub tl to the main one will solve the issue.
  5. Hi, I need a help to solve my issue. I have a for loop where I create tweens on a sub timeline that is added to the main timeline. The problem is that each tween that added to the sub timeline played a slight later then the previous one. I have an array with elements `pathElem`. var pathObject = { pathElem: [], pathLength: [], pathTiming: null, }; var tlMain = new TimelineMax(); var tlSub = new TimelineMax(); for( var i = 0; i < chartContainer.length; i++ ) { tlMain.add( tlSub.from(pathObject['pathElem'][i], pathObject['pathTiming'][i], {drawSVG: 0}, 0)); } tlMain.play(); What should I change to play them at the same time?
  6. Hi, Could you explain me some things that I do not understand while I was experiencing with the draggable object. The codepen link is the GSAP example. There are two properties if I use together they do undesirable effect. If the minDuration set i.e. 50 and throwResistance very high like 100000 than the knob will spin for 50 seconds and will decrease the speed gradually. However if I use the same minDuration but the throwResistance set to very low like 100 than the knob stops spinning in couple of seconds. Should not the knob spin for at least 50 seconds in each case? Thank you
  7. Thank you guys for the help. It did the job.
  8. Hi, I am trying to figure out how to make effect that scales the `li` element up what is between the two horizontal lines. I tried to use different properties on the object but none of them was working. Could you give me a hint how to solve this problem if it is possible? It should change the size of the current `li` element that is between the lines regardless where you grab the navigation. Thanks
  9. Thank you, I spent probably over 10 hours to read and learn the documentation and around 6 hrs to tweening but still there is lot of things I am not familiar or I do not know at all (just like this). Absolutely great platform but takes lots of time to master it.
  10. Lacika1981

    drawSVG fromTo

    Hi, I have got a problem and I can not figure out what it is caused by. I would like to have a hamburger menu like icon that goes into a circle. It works but because I use the `fromTo` method with `drawSVG` it hides the top line what I morph and draw and shows only when it starts to draw the circle. Please check codepen for more detail. Thank you
×
×
  • Create New...