Jump to content


  • Posts

  • Joined

  • Last visited

Lacika1981's Achievements


Newbie (1/14)



  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.