Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by Lacika1981

  1. Thank you @Rodrigo It did the trick. Thank you @Shaun Gorneau and @Carl as well for the help. I think using the config object I can rid of the changeImage function as well.
  2. Thanks Carl, Actually that changeImage function does not do much during the animation. I only have that one because when the animation stops at "tl.duration() * .2" time than 3 images has opacity more than 0. It means the image looks blurry. That function just changes 2 of the 3 images' opacity to 0. Not well optimised yet as it goes through the whole array as soon as the animation stops. The problem happens when you change the slide while the animation is still running. This line of code is used to change the opacity TweenMax.staggerTo(images, .1, { opacity: 1, immediateRender: true, onComplete: function() { this.target.style.opacity = 0; } }, .035); I am sure you understand what it does. It goes through the images one by one, change their opacity to 1 and as soon the animation is done then change it back to 0. The problem happens when you change the slide and therefore reverse the animation. animation plays forward tl.tweenFromTo(t, 'a'); animation plays backward tl.tweenFromTo(t, 'b'); If the animation runs backward (have not finished yet) and reverse it than 1 or 2 images still has/have opacity 1. This is what you can see on the last image that two divs still have opacity 1. And on the video above you can see a frame there as solid. This is caused by this bug. If the animation runs forward and reverse it then this problem has never happened. In codepen open the dev tools and click on the 'image-sequence' div to see all the divs inside. You can see as their opacity changes during the animation.
  3. Hi, I have made some changes and it works now. Here is the link: https://codepen.io/Lacika1981/pen/xMeLWB Open up the console and search for the DIV with class 'image-sequence'. Click on Test 2 link first and then Test 3 link. After click on these buttons alternately. You can see the divs inside the 'image-sequence' container changing their opacity. Sometimes the opacity does not change back to 0 but stays 1. It only happens if you click on Test 3 link while the animation is active(change from orange to green). I added a new image to show that the opacity did not change back to 0 on two divs.
  4. I have found something to change. I will do later tonight.
  5. Thank you @Rodrigo I will create one however yours one looks absolutely fine. But the swiper.js is not initialized for some reason
  6. I have created a pen but it does not want to work Could you have a look on that please? I believe everything is there and I get the following error message project-ca632744d417f98f7043.js:1 Error: GraphQL error: Field 'pen' doesn't exist on type 'ProjectUrls' https://codepen.io/Lacika1981/project/editor/ZMMekO
  7. Thank you for your response, Yes it does the same with empty divs. I will create a pen a bit later with empty divs
  8. The problem was caused by the "left" property. TweenMax.fromTo('.image-sequence', 3, { left: '60%' }, { left: '-30%' }); Using "x" property and the problem gone. TweenMax.fromTo('.image-sequence', 3, { x: '60%' }, { x: '-30%' });
  9. Hi, I have got an issue in Firefox. Same code as in my last topic. https://greensock.com/forums/topic/19872-render-issue-tweento/ In Firefox the element is not moving accross the screen. Please see the video
  10. Hi, I have got a little problem. When I reverse the animation than it sometimes does not change the opacity to '0' of an image in the sequence. I can not create a project as I am not a premium member and codepen does not let me to upload files. I created two videos. One of the animation and one of the DOM. The script changes the opacity of each image and showing it as a movie. Here is my script(It same as it is in the callback issue from yesterday): $(function() { var images = $('.image-sequence img'); var tl = new TimelineMax().pause(); mySwiper.on('slideChangeTransitionEnd', function() { if (mySwiper.realIndex === 1) { $('body').addClass('active-skeleton'); animateSkeleton(); } else if (mySwiper.realIndex === 2) { $('body').addClass('active-skeleton'); finishSkeletonAnimation(); } }); mySwiper.on('slideNextTransitionStart', function() { if (mySwiper.realIndex === 3) { $('body').removeClass('active-skeleton'); } }); mySwiper.on('slidePrevTransitionStart', function() { if (mySwiper.realIndex === 0) { $('body').removeClass('active-skeleton'); } }); function changeImage() { console.log('changeImage') setTimeout(function() { for (var i = 0, l = images.length; i < l; i++) { if (images[i].style.opacity > 0 && images[i].style.opacity < .9) { images[i].style.opacity = 0; } } }, 25); } var fp = TweenMax.staggerTo(images, .1, { opacity: 1, immediateRender: true, onComplete: function() { this.target.style.opacity = 0; } }, .035); var sp = TweenMax.fromTo('.image-sequence', 3, { left: '100%' }, { left: '30%' }); tl.add([fp, sp], 0); tl.add(['a', changeImage], tl.duration() * .2); tl.add(['b', changeImage], tl.duration() * .99); // window.addEventListener('') function animateSkeleton() { if (mySwiper.previousIndex === 0 || mySwiper.previousIndex !== 2) { if ($('.image-sequence').hasClass('first-part-played')) { tl.progress(.2); } else { tl.tweenTo(tl.duration() * .2); $('.image-sequence').addClass('first-part-played') } } if (mySwiper.previousIndex === 2) { var t = tl.progress() * tl.duration(); tl.tweenFromTo(t, 'a'); } } function finishSkeletonAnimation() { if (mySwiper.previousIndex !== 1) { tl.progress(.99); } else { var t = tl.progress() * tl.duration(); tl.tweenFromTo(t, 'b'); } } }); I am using Swiper.js to change slides. Here are two short videos. The problem does not occurs at every time but random. Please see the videos. Here you can see one solid frame Here you can see that one elem still has got opacity: 1 It happens only if I go from orange to green background.
  11. Lacika1981


    I am back I have dig up the forum and found a solution. It seems to be working and not adding extra element to the timeline. var fp = TweenMax.staggerTo(images, .1, { opacity: 1, onComplete: function () { this.target.style.opacity = 0; } }, .035); var sp = TweenMax.fromTo('.image-sequence', 3, {left: '60%'}, {left: '-30%'}); tl.add([fp, sp], 0); tl.add('a', tl.duration() * .2); tl.add('b', tl.duration() * .99); // window.addEventListener('') function animateSkeleton() { if(mySwiper.previousIndex === 0 || mySwiper.previousIndex !== 2) { if($('.image-sequence').hasClass('first-part-played')) { tl.progress(.2); } else { tl.tweenTo(tl.duration() * .2); $('.image-sequence').addClass('first-part-played') } } if(mySwiper.previousIndex === 2) { tl.tweenFromTo('b', 'a'); } } function finishSkeletonAnimation() { if(mySwiper.previousIndex !== 1) { tl.progress(.99); } else { tl.tweenFromTo('a', 'b'); } } This animation works on a slider. So if I go to a different slide than it continues the animation or reverse it back. And if I go to any slide where the skeleton is but the previous slide was not part of the animation than it just set the progress of the timeline to '.99' or '.2' . It depends on which slide you click on. It will be 1 but not yet now. thank you for the help guys
  12. Lacika1981


    Thank you for the detailed answer. Yes it makes sense now. I try to make it. If can not then I will post what I have done and ask again for help.
  13. Lacika1981


    Thanks Dipscom, I try to give more details var tl = new TimelineMax(); var rotateSkeleton; function animateSkeleton() { images.removeClass('played'); rotateSkeleton = tl.staggerTo(images, .1, { opacity: 1, onUpdate: function() {this.target.className = 'played'}, onComplete: function () { this.target.style.opacity = 0; this.target.classList.remove('played'); } }, .035, 0, removeElemWithNoFullOpacity); TweenMax.to('.image-sequence', 1, {left: '15%'}); rotateSkeleton.tweenTo(1); // setTimeout(function() { // removeElemWithNoFullOpacity(); // }, 1000) } function finishSkeletonAnimation() { if(mySwiper.previousIndex < mySwiper.realIndex) { TweenMax.fromTo('.image-sequence', 2, {left: '15%'}, {left: '-30%'}); rotateSkeleton.tweenFromTo(1, 4); } // setTimeout(function() { // removeElemWithNoFullOpacity(); // }, 2000) } I added the tl to 'rotateSkeleton' because I wanted to use the 'tweenTo' and 'tweenFromTo' methods to stop the animation at a certain time and continue when I call the 'finishSkeletonAnimation' function
  14. Lacika1981


    Okay, I found a half working solution. I have to add the cb function at the end of the 'staggerTo' method. But because I use the tweenTo method it only works if the whole animation finishes. I need a one that fires when the tweenTo method finishes.
  15. Lacika1981


    Hi, I am a having a bit problem to set a callback function. Here is what I am doing. function animateSkeleton() { rotateSkeleton = tl.staggerTo(images, .1, { opacity: 1, onComplete: function () { this.target.style.opacity = 0; this.target.classList.remove('played'); }, onStart: function() {this.target.className += 'played'} }, .035); TweenMax.to('.image-sequence', 1, {left: '15%'}); rotateSkeleton.tweenTo(1); setTimeout(function() { removeElemWithNoFullOpacity(); }, 1000) } It works fine once but when I call this 'animateSkeleton' function again then the setTimeout function is not working it animates backward (from 3 seconds to 1 second). I tried to add callback function to the onComplete method but it fires after each completed animation. I tried to add the onCompleteAll method but it did not work either. What I really need is a method that fires when the whole animation has just finished and my custom cb function can be invoked.
  16. Got it work. TweenMax.from('.st1', .5, {attr: {cy: 50}}).delay(.5); But I was not able to use fromTo TweenMax.fromTo('.st1', .5, { attr: {cy: 24.6}, cy: 40 }).delay(.5);
  17. Hi, I would like to move the circle object on the y-axis up and down. How can I do that? My current code is not working. Thanks
  18. Hi, I have got an issue. I have an svg line element to animate. Unfortunately it turns to a solid line on animation. I have read few topics to solve the problem but could not. This element has stroke, stroke-width and stroke-dasharray. Is the problem with the svg element? Thanks
  19. 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.
  20. 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
  21. I created the project on codepen and it works there. The error must be somewhere else.
  22. 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
  23. 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.
  24. 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?